对于如何简化 redux + react，这是一个愚蠢的想法吗？

Question

我正在尝试重构一个应用程序以使用 redux 工具包，但是我运行在分派一个设置状态的操作时陷入无限循环，我怀疑这是因为我没有遵循约定。

我试图在高层次上做的是有一个 useAppHandlers 挂钩，returns 整个应用程序的所有处理程序。同样，我有一个 useAppState 挂钩，returns 一个全局对象 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 };
};

^^这看起来有问题吗？很遗憾，我不能分享完整的回购协议，因为它是私人的。

在我遇到的所有 redux 示例中，除了他们在每个组件中调度的操作之外，人们还导入 useDispatch。我真的不喜欢它如何导致如此多的代码行仅用于导入和设置 ex： const dispatch = useDispatch() 在整个回购协议中重复令人作呕的广告）。

这个 repo 是我试图避免的真实示例：

https://github.com/Uniswap/uniswap-interface/blob/4078390a4890445d1ff0ed5196fd4cb56a44de87/src/components/NavigationTabs/index.tsx#L116

在我放弃并遵循约定之前，我想确定我配置 redux 的上述方式是否是无限循环的根源，或者它是否是我在代码中更深入地引入的随机错误。

Answer 1

老实说，就是不要。如果在创建这样一个 god-object 时需要 bundle-split，你将永远无法在未来进行 bundle-split。此外，现在添加一些内容意味着您必须至少再触摸一个未使用该内容的文件 - 删除也是如此。

除此之外，写得如此“宽”select或 select 一个完整的切片，即使您的组件只消耗该切片的一部分，对您的性能来说也是一件可怕的事情- 如果该切片中的任何内容发生变化，这些组件将始终重新呈现，无论它对您的组件是否重要。

最后：忽略您的导入，让您的 IDE 为您处理，可能开箱即用。您的 IDE 可以为您自动导入它们。您可以配置 IDE（使用 eslint 自动修复或其他插件）自动按字母顺序对导入进行排序，并在保存时删除未使用的导入。我敢肯定，如果你不想看到它们，甚至会有一个插件可以为你折叠你的导入。

PS：至于 为什么 在 react-redux 中你通常到处导入 useDispatch ，你可以在这里读一下这个决定的历史: https://react-redux.js.org/api/hooks#recipe-useactions

对于如何简化 redux + react，这是一个愚蠢的想法吗？

Is this a dumb idea for how to simplify redux + react?

reactjs

redux

redux-toolkit