如何使用 redux state 和 react hooks

Question

所以我们最近决定开始在我们当前的 React 应用程序中使用钩子。我们正在使用 redux 进行状态管理，我的问题是它如何与钩子一起工作？

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

我知道 react api 有一个 useReducer 方法，这个可以用来调度 redux 动作吗？我一直在寻找 tutorial/example 但似乎无法在网上找到任何相关资源。我可能走错了路，但我想知道我是否走错了路。谢谢

Answer 1

我不是 Redux 的重度用户（我更喜欢 MobX），所以我可能忽略了某些细微的方面。但据我所知，它非常简单，React docs on hooks 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，您可以简单地使用现有状态管理代码库中的相关 reducer 之一。只需将其导入组件文件并将其作为第一个参数传递给 useReducer。您将从那里 return 的状态将成为组件的新状态，并且它将自动重新呈现自身。显然，您需要断开此类组件与 Redux 的连接（ 如果它已连接 ）。否则，正如其中一条评论中提到的那样，您最终会得到冗余的状态管理逻辑。

但是在你那里，我不会在没有绝对必要的情况下为钩子重写它。

Answer 2

使用 Redux 时 hooks 没有任何变化，Redux Higher Order Component 与 Hooks 无关。 useReducer 并非用于调度 Redux 操作，而是用于以与 Redux 相同的方式更新组件内部状态。

因此，当您使用 useReducer 时，您将分派操作、使用 reducer 等更新状态，而不是 Redux 状态！相反，您正在使用组件状态执行此操作。

使用 useReducer 的组件是一个标准组件，内部状态（用于管理输入状态或任何你想要的）包装，像往常一样在钩子诞生之前，在 Redux 的连接 HOC 中。

如果对您有帮助，您可以通过 this post

阐明您的想法

如何使用 redux state 和 react hooks

How to use redux state with react hooks

reactjs

redux

react-hooks