Javascript 我应该在何时向React应用程序添加Redux？

我目前正在学习React，并试图找出如何将其与Redux一起用于构建移动应用程序。我有点搞不清楚这两者是如何联系在一起的。例如，我在React中完成了本教程，但现在我想尝试在该应用程序中添加一些简化程序/操作，我不确定这些简化程序/操作与我已经完成的操作有何关联。

React是一个UI框架，负责根据通常被描述为“国有”的“真相来源”更新UI由某一部分组成。很好地描述了React国有制的概念，我强烈建议您仔细阅读

当状态是分层的并且或多或少与组件结构相匹配时，这种状态所有权模型工作得很好。通过这种方式，状态在许多组件之间“分散”，应用程序也很容易理解

但是，有时应用程序的远程部分希望访问相同的状态，例如，如果您缓存获取的数据并希望在同一时间一致地在任何地方更新数据。在这种情况下，如果您遵循React模型，您将在组件树的顶部得到一堆非常大的组件，这些组件通过一些不使用它们的中间组件传递大量的道具，只是为了到达一些真正关心这些数据的叶组件

当您发现自己处于这种情况时，您可以（但不必）使用Redux将该状态管理逻辑从顶级组件“提取”到称为“还原器”的单独函数中，并将关心该状态的叶组件直接“连接”到它，而不是通过整个应用程序传递道具。如果您还没有这个问题，您可能不需要Redux

最后，请注意Redux并不是这个问题的最终解决方案。在React组件之外，还有许多其他方法可以管理您的本地状态，例如，一些不喜欢Redux的人对React很满意。我建议您首先对React-state模型有一个明确的了解，然后独立评估不同的解决方案，并与它们一起构建小型应用程序，以了解它们的优缺点

---

（这个答案的灵感来自Pete Hunt的指南，我建议您也阅读它。）

我发现，将Redux添加到应用程序/堆栈的理想方法是等到您/应用程序/团队感受到它解决的痛苦之后。一旦你开始看到长链的

道具在多个级别的组件中不断积累和传递，或者你发现自己在协调复杂的状态操作/读取，这可能是一个迹象，表明你的应用程序可能会从引入Redux等人中受益

我建议您使用一个已经使用“just React”构建的应用程序，看看Redux如何适应它。看看你是否可以通过一次抽出一个状态或一组“动作”来优雅地引入它。朝着这个方向重构，而不必为应用程序的大爆炸式重写而烦恼。如果你仍然无法看到它在哪里可以增值，那么这可能是一个信号，表明你的应用程序不是太大，就是不够复杂，不值得在React之上添加Redux之类的东西

如果你还没有接触到它，Dan（上面回答）有一个很棒的短片系列，在更基础的层面上介绍Redux。我强烈建议花些时间吸收其中的一些内容：

Redux还有一些非常棒的文档。特别是解释了很多“为什么”，比如说，首先，如果不需要的话，您不需要向应用程序添加
Redux
！简单，所以如果你根本不需要它，就不要强迫自己把它包含在你的项目中！但这并不意味着Redux不好，它在大型应用程序中非常有用，所以请继续阅读

Redux是React应用程序的状态管理，考虑一下
Redux
就像一个本地存储，在运行时跟踪您的状态，您可以在任何页面和路径中访问您想要的状态，与Flux相比，您只有一个存储，意味着一个真实来源

查看此图，以了解Redux的第一步功能：


Redux也是这样介绍自己的：

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

它可以帮助您编写行为一致的应用程序，并在
不同的环境（客户端、服务器和本机），并且易于
测试。除此之外，它还提供了良好的开发人员体验，例如
作为实时代码编辑与时间旅行调试器相结合。

您可以将Redux与React或任何其他视图库一起使用。
它很小（2kB，包括依赖项）

此外，根据文件规定，
Redux
有以下三个原则：

1。真理的单一来源

2。状态为只读

3。使用纯功能进行更改

因此，基本上，当您需要在单个商店中跟踪应用程序中您喜欢的任何内容时，Redux非常方便，您可以在应用程序中的任何位置、任何路线访问它。。。只需使用
store.getState（）

同样使用中间件Redux，您可以更好地管理状态，Redux的官方页面上有一个方便的组件和中间件列表

简单地说，如果你的应用程序很大，有很多组件、状态和路由，那么从一开始就尝试实现Redux！它肯定会在路上帮助你
 编写应用程序时，我们需要管理应用程序的状态。
如果我们需要在组件之间共享状态，React将在组件内部本地管理状态，我们可以使用props或回调

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

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

cosnt boundAddTodO = text => dispatch(addToDo(text));

boundaddTodO(text);

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}