将 React Hook 和 redux 一起用于 React 功能组件是不是不好？

Posted 2023-02-22

【中文标题】将 React Hook 和 redux 一起用于 React 功能组件是不是不好？

【英文标题】：Is it bad to use React Hook and redux together for React functional component?将 React Hook 和 redux 一起用于 React 功能组件是否不好？

【发布时间】：2020-04-10 19:35:39

【问题描述】：

我正在对局部变量使用反应钩子，例如 const [something, setSomthing] = useState('') 和 redux 用于使用 store 和 Provider 存储通过整个组件传递的变量。

但是有人告诉我我不应该同时使用 React Hooks 和 Redux。 有人可以解释为什么，如果我不应该，我应该如何在功能组件中存储局部变量？

【问题讨论】：

在功能组件中存储状态是可以的，只要它与该组件相关，例如处理表单数据。但是，当您希望该状态传播到多个组件时，您应该使用 redux，因为 redux 处理全局状态。

【参考方案1】：

Redux 和本地状态一直是一起使用的。钩子用于重现您可以存储在基于类的组件中的本地状态，但使用功能组件代替。 就像您在问题中所说的那样，状态挂钩用于保持组件的本地状态，而 redux 用于保持应用程序的全局状态。 它们彼此并不矛盾。假设您有一个保留计数器的组件，但该计数器仅由该组件在本地使用。对于这种情况，您将使用钩子来保持计数器的状态。 现在假设您的应用程序的要求发生了变化，现在该计数器（该特定计数器，具有相同的值，而不是不同的值）需要由您的应用程序中的其他组件使用。在这种情况下，该计数器必须移动到 redux 全局状态。 我希望这能回答你的问题。

【参考方案2】：

如果全局不需要状态，则可以使用 setState 钩子将其本地存储在函数中，而无需使用 Redux。

如果需要，也可以在功能组件中使用 Redux 来获取全局状态。但是，对于许多用例，您可以将 Context API 与 React 提供的钩子一起使用。

【参考方案3】：

没有必要担心你的 redux 和 react-hooks，因为它们的用例完全取决于你的数据，如果你不想在导航到页面后看到加载的数据，所以我建议你保留你的代码没有任何数据存储管理器，例如 Mobx 或 Redux，但是如果您想将数据存储在某个地方并在页面之间共享它们，那么您需要在项目中实现一个数据管理器。但是 React hooks 和 redux 完全没有冲突。

但如果您对 React 钩子感到满意，它可以帮助您通过 React 上下文 API 像 Redux 一样存储数据。

在 Typescript 中使用 React 上下文 API 的演示：

https://github.com/ali-master/react-typescript-hooks-sample