我应该何时将Redux添加到React应用程序?

我目前正在学习React,并且正在尝试弄清楚如何使用Redux来构build移动应用程序。 我对这两者如何相关/可用在一起感到困惑。 例如,我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了这个教程,但是现在我想要在该应用程序中添加一些reducer / actions,我不确定那些将与我已经完成的事情配合。

React是一个UI框架,负责更新UI,以响应通常被某个组件“拥有”的状态的“真相源”。 在React中的思考很好地描述了React国家所有权的概念,我强烈build议你通过它。

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

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

当你发现自己处在这种情况下时,你可以 (但不必)使用Redux从顶层组件中将这个状态pipe理逻辑“提取出来”,称为“reducer”和“连接”叶子组件直接关注该状态,而不是通过整个应用程序传递道具。 如果你还没有这个问题,你可能不需要Redux。

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

(这个答案是由Pete Hunt的反应指南启发的,我build议你也读一下。)

我发现将Redux添加到应用程序/堆栈的理想path是等到你/ app / team感觉到它解决的痛苦之后。 一旦你开始看到长长的链条build立,并通过多层次的组件或你发现自己编排复杂的状态操作/阅读,这可能是一个迹象,你的应用程序可能会受益于介绍Redux等。

我推荐你使用“React”构build的应用程序,看看Redux如何适应它。 看看你是否可以一次拔出一个状态或一组“行动”来优雅地介绍它。 重构它,而不会挂在你的应用程序的大爆炸重写。 如果您仍然无法看到可能会增加价值的地方,那么这可能表示您的应用程序不够大或不够复杂,无法在React之上获得类似Redux的function。

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

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

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

Redux是您的React应用程序的状态pipe理,可以考虑Redux就像本地商店一样,随时随地跟踪您的状态,您可以访问任何页面中的状态,并与Flux进行比较,您只有一家商店,意味着事实的一个来源

看看这个图像,了解Redux首先要做的事情:

在这里输入图像说明

这也是Redux介绍自己的方式:

Redux是JavaScript应用程序的可预测状态容器。

它可以帮助您编写在不同环境(客户端,服务器和本机)中运行一致并且易于testing的应用程序。 最重要的是,它提供了一个很棒的开发者体验,例如结合时间旅行debugging器的实时代码编辑。

您可以将Redux与React一起使用,或与任何其他视图库一起使用。 这是微小的(2KB,包括依赖)。

另外根据文档, Redux三个原则如下:

1.真相的单一来源

2.状态是只读的

3.使用纯function进行更改

所以基本上,当你需要一个商店来跟踪你的应用程序中的任何东西时,Redux很方便,你可以在你的应用程序的任何地方,任何path上访问它…只需使用store.getState();

同样使用中间件Redux,你可以更好地pipe理状态,在Redux的官方页面上有一个方便的组件和中间件列表!

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