0

我得到了一个使用constate创建的状态管理文件，其中有一个自定义钩子：

 // --- helpers
const isPolicyChangeOption = option => (option in PolicyChangeOptions)

const hasSupportedPolicyChangeStatus = (changeType, changeStatus) => {
  const supportedStatuses = OPTION_SUPPORTED_STATUS[changeType]
  return !!supportedStatuses && supportedStatuses.includes(changeStatus)
}

// --- main hook
function usePolicyChangeOption ({ pendingPolicyChange }) {
  const [
    currentPolicyChangeOption,
    setCurrentPolicyChangeOption
  ] = useState('')

  const goToPolicyChangeOptionView = () => {
    setCurrentPolicyChangeOption('')
  }

  const goToPolicyChangeOptionWorkflow = o => {
    if (isPolicyChangeOption(o)) setCurrentPolicyChangeOption(o)
    else console.error('Invalid View for goToPolicyChangeOptionWorkflow(option): ', o)
  }

  const shouldDisableAllOptions = (
    !!pendingPolicyChange &&
    !hasSupportedPolicyChangeStatus(pendingPolicyChange?.policyChangeType, pendingPolicyChange?.policyChangeStatus)
  )

  return {
    currentPolicyChangeOption,
    shouldDisableAllOptions,
    goToPolicyChangeOptionView,
    goToPolicyChangeOptionWorkflow
  }
}

const [
  PolicyChangeOptionContextProvider,
  usePolicyChangeOptionContext
] = constate(usePolicyChangeOption)

// ---

export default PolicyChangeOptionContextProvider
export {
  // Constate
  PolicyChangeOptionContextProvider,
  usePolicyChangeOptionContext,

  // Helpers
  isPolicyChangeOption,
  hasSupportedPolicyChangeStatus
}

但是现在我想进入React Context/Reducer 模式。

我已经走了很远，但我想知道usePolicyChangeOption上面写的方式在下面的 React Context/Reducer 中是否有意义？

// --- helpers
const isPolicyChangeOption = option => (option in PolicyChangeOptions)

const hasSupportedPolicyChangeStatus = (changeType, changeStatus) => {
  const supportedStatuses = OPTION_SUPPORTED_STATUS[changeType]
  return !!supportedStatuses && supportedStatuses.includes(changeStatus)
}

const PolicyChangeStateContext = React.createContext()
const PolicyChangeContextDispatch = React.createContext()

const initialState = {
  currentPolicyChangeOption: '',
  shouldDisableAllOptions: false
}

function policyChangeReducer (state, action) {
  switch (action.type) {
    case 'setCurrentPolicyChangeOption': {
      return { ...state, currentPolicyChangeOption: action.policy } }

    case 'setShouldDisableAllOptions': {
      return { ...state, shouldDisableAllOptions: !state.shouldDisableAllOptions } }

    case 'goToPolicyChangeOptionView': {
      return { ...state, currentPolicyChangeOption: '' } }

    case 'goToPolicyChangeOptionWorkflow' : {
      if (isPolicyChangeOption(action.isPolicyChangeOption)) {
        return { ...state, currentPolicyChangeOption: action.policy }
      } else {
        console.error('Invalid View for goToPolicyChangeOptionWorkflow(option): ', action.isPolicyChangeOption)
      }
      break
    }
    case 'shouldDisableAllOptions' : {
      !!action.pendingPolicyChange && !hasSupportedPolicyChangeStatus(action.pendingPolicyChange?.policyChangeType, action.pendingPolicyChange?.policyChangeStatus)
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`)
    }
  }
}

function PolicyChangeProvider ({ children }) {
  const [state, dispatch] = React.useReducer(policyChangeReducer, initialState)

  return (
    <PolicyChangeStateContext.Provider value={{ policyChangeState: state }}>
      <PolicyChangeContextDispatch.Provider value={{ policyChangeContextDispatch: dispatch }}>
        {children}
      </PolicyChangeContextDispatch.Provider>
    </PolicyChangeStateContext.Provider>
  )
}

提前致谢！

4

0 回答 0