我在我的 React 应用程序中使用 redux-toolkit。我在反应组件中使用 useSelector 和 useDispatch 来管理组件控制的状态。在react组件之外,我还在js代码中调用dispatch函数(意思是在react组件之外)来更新状态。
我面临的问题是,在这个函数中我同时运行多个调度。这会导致我的组件的 useSelector 在每次调度时更新。如何批量处理所有这些调度,以便 useSelector 仅重新渲染 React 组件一次?
这是我的代码示例。假设反应组件“计数器”具有以下内容:
const count = useSelector(state => state.count)
const title = useSelector(state => state.title)
const name = useSelector(state => state.name)
现在可以说在我的反应组件之外我有一个调用多个函数的全局窗口函数:
window.foo = () => {
function1();
function2();
function3();
}
现在假设每个 function1()、function2()、function3() 都调用 redux 调度函数来更新状态的标题、名称和计数。
目前我的组件将为我使用的每个 useSelector 重新渲染 3 次。我希望 useSelector 仅在所有 3 个调度都已被调用时重新渲染一次。
我知道react-redux batch函数,但我正在寻找另一种解决方案,因为我不想强迫自己只在一个函数中调用调度。有没有办法延迟 redux 在执行我可以增加的队列中的所有调度之前等待的默认“等待”期?
附注我假设必须有某种“等待期”,因为 redux 开发工具扩展暗示了这种情况。另外,从个人测试中我注意到,如果你连续调用dispatch()两次,use选择器只会被调用一次,因此这让我相信redux一定有某种等待期。
我认为你看待这个问题的方式是错误的。在 Redux 中,
dispatch()
函数不应被视为 setter。相反,你的意思是用它来表示发生了某些事情,并且减速器对该事件做出反应。
Redux 的创建者 Dan Abramov 多年前就这样说过。
如果您的操作创建者名称以 set* 开头,并且您经常调用 连续多个,您可能会错过使用 Redux 的意义。
关键是将“发生了什么”与“状态如何变化”脱钩。 “二传手”动作创造者违背了目的,将两者混为一谈。
在您的示例中,修复方法是仅发送一个调度调用,并让多个减速器监听它。