我应该何时将Redux添加到React应用程序? [英] When should I add Redux to a React app?

问题描述

我目前正在学习React，我试图弄清楚如何将它与Redux一起用于构建移动应用程序.我对两者如何关联/一起使用感到困惑.例如，我在React https://www中完成了本教程. raywenderlich.com/99473/introducing-react-native-building-apps-javascript ，但现在我想在该应用程序中添加一些reduces/actions，但我不确定它们在哪里结合我已经做完了.

I'm currently learning React and I am trying to figure out how to use it with Redux for building a mobile app. I'm kind of confused on how the two are related/usable together. For example, I completed this tutorial in React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript, but now I want to play around with adding some reducers/actions to that app and I am not sure where those would tie in with what I've already done.

推荐答案

React是一个UI框架，负责响应真理之源"来更新UI，真理之源"通常被某些人描述为拥有"的状态.成分. React中的思想很好地描述了React状态所有权的概念，并且我强烈建议您仔细阅读.

React is a UI framework that takes care of updating the UI in response to the "source of truth" that is usually described as a state "owned" by some component. Thinking in React describes the React state ownership concept very well, and I strongly suggest you go through it.

当状态是分层的并且或多或少与组件结构匹配时，此状态所有权模型可以很好地工作.这样，状态就可以分散"到许多组件中，并且该应用程序易于理解.

This state ownership model works well when the state is hierarchical and more or less matches the component structure. This way the state gets "spread out" across many components, and the app is easy to understand.

但是，有时应用程序的遥远部分希望能够访问相同的状态，例如，如果您缓存获取的数据并希望同时在各处一致地更新它.在这种情况下，如果您遵循React模型，您将在组件树的顶部得到一堆非常大的组件，这些组件将无数个prop向下传递给一些不使用它们的中间组件，只是为了到达一些真正关心该数据的叶子组件.

However sometimes distant parts of the app want to have access to the same state, for example, if you cache fetched data and want to consistently update it everywhere at the same time. In this case, if you follow the React model, you’ll end up with a bunch of very large components at the top of the component tree that pass a myriad of props down through some intermediate components that don’t use them, just to reach a few leaf components that actually care about that data.

在这种情况下，您可以(但不必)使用Redux将状态管理逻辑从顶级组件提取"到称为"reducers"的单独函数中"，并将关心"该状态的叶子组件直接连接"到它，而不是通过整个应用传递道具.如果您还没有这个问题，则可能不需要Redux.

When you find yourself in this situation, you can (but don’t have to) use Redux to "extract" this state management logic from the top-level components into separate functions called "reducers", and "connect" the leaf components that care about that state directly to it instead of passing the props through the whole app. If you don’t have this problem yet, you probably don’t need Redux.

最后，请注意Redux并不是解决此问题的最终解决方案.还有许多其他方法可以在React组件之外管理您的本地状态-例如，一些不喜欢Redux的人对

Finally, note that Redux is not a definitive solution to this problem. There are many other ways to manage your local state outside the React components—for example, some people who didn’t like Redux are happy with MobX. I would suggest you to first get a firm understanding of React state model, and then evaluate different solutions independently, and build small apps with them to get a sense of their strengths and weaknesses.

(此答案的灵感来自Pete Hunt的反应方法指南，建议您也阅读它.)

(This answer is inspired by Pete Hunt’s react-howto guide, I suggest you to read it as well.)

这篇关于我应该何时将Redux添加到React应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！