如何将 redux 状态与反应钩子一起使用



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

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

我知道反应 api 有一个useReducer方法,这可以用来调度 redux 操作吗?我一直在寻找教程/示例,但似乎无法在线找到任何资源。我可能走错了路,但想知道我是否走错了路。谢谢。

使用 Redux时钩子没有任何变化,Redux 高阶组件与钩子无关。useReducer不是用来调度 Redux 操作,而是用来像 Redux 一样更新组件内部状态。

因此,当您使用useReducer时,您将调度操作,使用化简器更新状态等,但不会更新 Redux 状态!相反,您正在使用组件状态执行此操作。

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

如果有帮助,您可以通过这篇文章澄清您的想法

我不是Redux的重度用户(我更喜欢MobX),所以我可能会忽略某些微妙的方面。但据我所知,这非常简单,钩子上的 React 文档提供了非常好的例子:

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的连接(如果已连接)。否则,正如其中一条评论中提到的,您最终将得到冗余的状态管理逻辑。

但是,在您的位置上,我不会在没有任何完全必要的情况下为钩子重写它。

相关内容

  • 没有找到相关文章

最新更新