Question

因此，我们最近决定在当前的react应用中开始使用钩子。我们正在使用redux进行状态管理，我的问题是，钩子如何工作？

我已经阅读了一些文章，其中人们使用带有钩子的上下文api创建状态管理器，但我现在想继续使用redux。

我知道react api有一个useReducer方法，该方法可以用来分派redux操作吗？我一直在寻找教程/示例，但似乎无法在线找到任何资源。我可能走错了路，但想知道自己是否正确。谢谢。

Answer 1

我不是Redux的重度用户（我更喜欢MobX ），因此我可能忽略了某些微妙的方面。但是从我看来，这非常简单，React文档位于钩子provide very nice example上：

const initialState = {count: 0};

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

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

您可以简单地使用现有状态管理代码库中的相关归约器之一来代替此处的reducer。只需将其导入组件文件并将其作为第一个参数传递给useReducer。您将从那里返回的状态将变为该组件的新状态，并且它将自动使用该组件自动呈现。显然，您需要从Redux（如果已连接）断开此类组件。否则，正如其中一条评论中提到的那样，您最终将获得冗余状态管理逻辑。

但是，在您的位置上，我毫无必要地将其重写为钩子。

Answer 2

使用Redux时，钩子没有任何变化，Redux高阶组件与钩子无关。 useReducer并非用于分发Redux操作，而是用于以与Redux相同的方式更新组件内部状态。

因此，当您使用useReducer时，您将分派动作，使用reducer等更新状态，而不是Redux状态！而是使用组件状态来完成此操作。

消耗useReducer的组件是一个标准组件，其内部状态（用于管理输入状态或您想要的任何内容）像往常一样被包装在Redux的connect HOC中。

如果有帮助，您可以使用this post

阐明您的想法

如何在React钩子上使用Redux状态

2 个答案: