React 函数式组件,React Hook 和 redux 一起使用不好吗?

Is it bad to use React Hook and redux together for React functional component?

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

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

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

如果全局不需要状态,可以使用 setState 挂钩将其本地存储在函数中并且不使用 Redux。

如果需要的话,在全局状态的功能组件中使用 Redux 也是可以的。但是,对于许多用例,您可以使用 Context API 和 React 提供的钩子。

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

但如果您熟悉 React hooks,它可以帮助您像 Redux 一样通过 React 上下文存储数据 API。

在 Typescript 中使用 React context API 的演示:

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