什么时候应该将Redux添加到React应用程序?

问题描述:

我目前正在学习React,并试图找出如何将其与Redux一起用于构建移动应用程序。我对这两者如何相关/可用在一起感到困惑。例如,我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程,但现在我想要在该应用程序中添加一些减法器/操作,并且我不确定那些将与我已经完成的操作配合使用。什么时候应该将Redux添加到React应用程序?

React是一个UI框架,负责更新UI以响应通常被某个组件描述为“拥有”的状态的“真相源”。 Thinking in React非常好地描述了React国家所有权概念,我强烈建议你仔细阅读它。

此状态所有权模型在状态为层次结构并且或多或少与组件结构匹配时运行良好。通过这种方式,状态可以跨多个组件“分散”,并且该应用程序很容易理解。

但是,有时应用程序的遥远部分想要访问相同的状态,例如,如果缓存提取的数据并希望在同一时间持续更新它。在这种情况下,如果遵循React模型,最终会在组件树的顶部添加一大堆非常大的组件,这些组件会通过一些不使用它们的中间组件传递大量道具,达到实际上关心这些数据的几个叶子组件。

当您发现自己处于这种情况时,您可以使用Redux从顶层组件中“提取”这种状态管理逻辑,将其分解为称为“reducer”的单独函数,以及“连接“直接关注该状态的叶子组件,而不是通过整个应用传递道具。如果你还没有这个问题,你可能不需要Redux。

最后,请注意,Redux不是该问题的明确解决方案。还有许多其他方式可以在React组件外管理本地状态 - 例如,一些不喜欢Redux的人对MobX感到满意。我建议你首先对React状态模型有一个明确的理解,然后独立评估不同的解决方案,然后用它们构建小型应用程序来了解它们的优缺点。

(此答案由皮特·亨特的react-howto引导启发,我建议你读它。)

我发现,添加终极版到应用程序/堆栈理想的路径是要等到之后,你/应用/团队感受到了它所解决的痛苦。一旦你开始看到长长的链条props建立和通过多层次的组件或你发现自己编排复杂的状态操作/读取,这可能表明你的应用程序可能受益于引入Redux等人。

我建议您使用已经用“React”构建的应用程序,看看Redux如何适合它。看看你是否可以一次拔出一个状态或一组“行为”来优雅地介绍它。重构它,而不会因为你的应用程序的大爆炸而重写。如果您在查看可能增加价值的位置时仍遇到问题,那么这可能表示您的应用程序不够大或不够复杂,无法在React之上获得类似Redux的功能。

如果你还没有碰到它,丹(上面的回答)有一个很棒的短视频系列,从更基本的层面穿过Redux。我强烈建议花一些时间吸收它的部分:https://egghead.io/series/getting-started-with-redux

Redux也有一些相当不错的文档。特别解释了很多“为什么”,如http://redux.js.org/docs/introduction/ThreePrinciples.html

+3

我完全同意你的看法。 Redux为您的应用程序添加了许多样板文件。对于中小型应用程序,Redux通常不是必需的。对于非常大的应用程序,你会发现自己层叠的道具经过了很多层次,以至于难以管理。那是Redux进来的时候。 –

+1

虽然Dan的回答很好,但这个更好,imo! – Buzinas

首先,如果您不需要它,您不需要将Redux添加到您的应用程序!简单,所以如果你根本不需要它,不要强迫自己把它包含在你的项目中!但这并不意味着Redux不好,它在大型应用程序中非常有用,所以请继续阅读...

Redux是您的React应用程序的状态管理,想想Redux就像本地商店那样跟踪您的状态当你走了,你可以访问任何页面和路线你想要的状态,也比较通量,你只有一个商店,意味着一个真相的来源...

看看这个图像,了解什么Redux先做一目了然:

enter image description here

而且这是如何Redux的我ntroduce本身:

终极版是JavaScript的应用程序可预测的状态容器。

它可以帮助你写的行为一致的应用程序,在 不同的环境(客户端,服务器和本地)运行,并且很容易 测试。最重要的是,它提供了极好的开发者体验,例如 作为实时代码编辑与时间旅行调试器相结合。

您可以将Redux与React一起使用,或与任何其他视图库一起使用。 它很小(2kB,包括依赖关系)。

而且按照文件以外,还有为Redux如下三个原则:

1.单一数据源

2.国家是只读的

3.使用纯功能进行更改

因此,基本上,当你需要一个单店来跟踪任何你在你的应用程序一样,那么终极版是很方便的,你可以在任何地方访问它在你的应用程序,在任何航线......简单地使用store.getState();

而且使用中间件Redux,你可以更好地管理状态,在Redux的官方页面上有方便的组件和中间件列表!

简单地说,如果你的应用程序会很大,有很多组件,状态和路由尝试从开始实现Redux!它会在途中帮助你!

当我们编写应用程序时,我们需要管理应用程序的状态。 如果我们需要共享组件之间的状态,我们可以使用道具或回调,React在组件内本地管理状态。

但随着应用程序的增长,变得很难管理状态和状态转换。为了调试应用程序,需要正确跟踪状态和状态转换。

终极版是为JavaScript应用程式可预测的状态的容器,其管理状态和状态转换,并且通常与用于做出反应,

终极版的概念可以在以下图像进行说明。

Redux

当用户在用户与该组件进行交互和动作被调度到存储然后在商店中的减速器接受动作,并更新该应用程序的状态,并且存储在应用广泛不可改变触发一个动作全局变量,当存储更新时,订阅该状态的相应视图组件将被更新。

由于状态是全局管理的,并且使用redux,所以维护起来更容易。