如何在类组件中使用React.useReducer（或等效的）？

Question

有什么方法可以使用

useReducer

或 React 原生类组件中的任何等效的东西吗？

是的，reducer 方法是原始的 js 函数。我们可以直接在课堂上使用它，而不是将它与课堂状态结合起来吗？

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

class App extends React.Component {
  ...
  render() {
    return(...)
  }
}

Answer 1

创建一个使用

useReducer

钩子的包装器组件，并将

state

和

dispatch

函数作为 props 传递。

示例：

const Wrapper = props => {
  const [state, dispatch] = useReducer(reducer, initialCount, init);

  return <App {...props} {...{ state, dispatch }} />;
};

这可能更好地抽象为可重用的高阶组件。

示例：

const withUseReducer = (...useReducerArgs) => Component => props => {
  const [state, dispatch] = useReducer(...useReducerArgs);

  return <Component {...props} {...{ state, dispatch }} />;
};

...

export default withUseReducer(reducer, initialCount, init)(App);

在类组件中消费：

class App extends React.Component {

  ...

  render() {
    const { state, dispatch } = this.props;

    ...

    return(...)
  }
}