【发布时间】：2021-10-01 00:23:02
【问题描述】：
我正在尝试重构应用程序以使用 redux 工具包，但在调度操作以设置状态时遇到了无限循环，我怀疑这是因为我没有遵循约定。
我试图在高层次上做的是有一个useAppHandlers 钩子，它返回整个应用程序的所有处理程序。同样，我有一个useAppState 钩子，它返回一个全局对象，其中 all 我的状态。来自my config file的片段：
export const useAppState = () => {
const coingeckoApiState: AppState[typeof coingeckoApi.reducerPath] = useSelector(state => state.coingeckoApi);
const connectionState: AppState['connection'] = useSelector(state => state.connection);
const currencyState: AppState['currency'] = useSelector(state => state.currency);
return { ...coingeckoApiState, ...connectionState, ...currencyState };
};
export const useAppHandlers = () => {
const connectionHandlers = useConnectionHandlers();
const currencyHandlers = useCurrencyHandlers();
return { ...connectionHandlers, ...currencyHandlers };
};
^^这看起来有问题吗？很遗憾，我无法分享完整的 repo，因为它是私有的。
在我遇到的所有 redux 示例中，除了他们在每个组件中调度的操作之外，人们还导入 useDispatch。我真的不喜欢它如何导致这么多行代码仅用于导入和设置 ex：
const dispatch = useDispatch() 在 repo 中重复令人作呕）。
这个 repo 是我试图避免的真实示例：
在我放弃并遵循惯例之前，我想确定一下我配置 redux 的上述方式是否是无限循环的来源，或者它是否是我在代码中更深入地引入的随机错误。
【问题讨论】：
-
我不认为这是导致无限循环的原因，但让每个组件都依赖于整个应用程序状态并不是最佳做法。我不认为它一定是有害的。如果您可以创建一个简化的示例来演示您的无限循环，那么我很乐意看看它。这是一个展示他们的计数器应用程序的示例 RTK 应用程序：codesandbox.io/s/rtk-counter-sample-ly8xe
-
谢谢。我将进行更多测试以缩小问题范围并报告。
标签： reactjs redux redux-toolkit