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

时间:2019-12-18 09:17:50

标签: reactjs redux react-hooks react-functional-component

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

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

如果需要,可以在功能组件中将Redux用于全局状态。但是,在许多情况下,您可以将Context API与React提供的钩子一起使用。

答案 2 :(得分:0)

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

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

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

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