我什么时候应该将 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，但现在我想尝试向该应用程序添加一些减速器/动作，但我不确定这些与什么有关我已经完成了.

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 以响应通常被描述为某些人拥有"的状态零件.Thinking in 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 模型，你最终会在组件树的顶部得到一堆非常大的组件，这些组件通过一些不使用它们的中间组件向下传递无数的 props，只是为了到达一些真正关心该数据的叶组件.

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 的人对 MobX.我建议你首先对 React 状态模型有一个深入的了解，然后独立评估不同的解决方案，并与它们一起构建小应用程序，以了解它们的优缺点.

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 的 react-howto 指南，我建议你也读一读.)

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

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