如果从 props 传递，则处理 useReducer

Question

我正在尝试在特定用例的组件中覆盖 useReducer。

按照我的overfly简化工作状态：

function defaultToggleReducer (state, action) {
  console.log('Default toggler used')
  return !state
}

function customTogglerReducer (state, action) {
  console.log('Custom toggler used')
  return !state
}

// Dummy wrap to log the initialization from `Togller` component to point the twice initializations
function toggleInitializer (state) {
  console.log('toggleInitializer')
  return state
}

function Toggler (props) {
  const [
    toggleState,
    toggleDispatch,
  ] = React.useReducer(defaultToggleReducer, false, toggleInitializer)
  
  // Here is the prt making the previous `useReducer` useless
  const state = props.toggleState !== undefined ? props.toggleState : toggleState
  const dispatch = props.toggleDispatch || toggleDispatch
  
  return (
    <button
      type="button"
      onClick={() => dispatch({ type: 'add' })}>
      {Boolean(state).toString()}
    </button>
  )
}

function App () {
  const [customToggleState, customToggleDispatch] = React.useReducer(
    customTogglerReducer,
    false
  )

  return (
    <div>
      <fieldset>
        <legend>Default</legend>
        <Toggler />
      </fieldset>
      <fieldset>
        <legend>Customized</legend>
        <Toggler
          toggleState={customToggleState}
          toggleDispatch={customToggleDispatch} />
        <button
          type="button"
          onClick={() => customToggleDispatch({ type: 'parentAction' })}>
          This is why I want dispatch
        </button>
      </fieldset>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root" />

在这里，有些东西闻起来很糟糕，我毫不怀疑这是有效的，但即使没有使用，useReducer 在Toggler 中被调用的事实也让我怀疑。所以，我认为这是一个死减速器。

所以我的问题是：

您是否有办法从父组件正确实现reduce 控件（至少：比这更好）？

Answer 1

使用组件的组合来解决这个问题。将 Toggler 分解为两个组件 - 愚蠢的 Toggler 需要外部减速器，DefaultToggler 渲染 Toggler，并提供减速器。

如果您需要标准切换器，请使用DefaultToggler，如果您需要自定义版本，请使用哑Toggler，并提供自定义减速器。

function defaultToggleReducer (state, action) {
  console.log('Default toggler used')
  return !state
}

function customTogglerReducer (state, action) {
  console.log('Custom toggler used')
  return !state
}

// Dummy wrap to log the initialization from `Togller` component to point the twice initializations
function toggleInitializer (state) {
  console.log('toggleInitializer')
  return state
}

function Toggler ({ toggleState: state, toggleDispatch: dispatch }) {  
  return (
    <button
      type="button"
      onClick={() => dispatch({ type: 'add' })}>
      {Boolean(state).toString()}
    </button>
  )
}

function DefaultToggler () {
  const [
    toggleState,
    toggleDispatch,
  ] = React.useReducer(defaultToggleReducer, false, toggleInitializer)

  return (
    <Toggler 
      toggleState={toggleState} 
      toggleDispatch={toggleDispatch} 
      />
  );
};

function App () {
  const [customToggleState, customToggleDispatch] = React.useReducer(
    customTogglerReducer,
    false
  )

  return (
    <div>
      <fieldset>
        <legend>Default</legend>
        <DefaultToggler />
      </fieldset>
      <fieldset>
        <legend>Customized</legend>
        <Toggler
          toggleState={customToggleState}
          toggleDispatch={customToggleDispatch} />
        <button
          type="button"
          onClick={() => customToggleDispatch({ type: 'parentAction' })}>
          This is why I want dispatch
        </button>
      </fieldset>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root" />