所以我们最近决定在当前的 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
的连接(如果已连接)。否则,正如其中一条评论中提到的,您最终将得到冗余的状态管理逻辑。
但是,在您的位置上,我不会在没有任何完全必要的情况下为钩子重写它。