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

当状态是分层的并且或多或少地匹配组件结构时，这种状态所有权模型很有效。通过这种方式，状态可以“分散”到许多组件中，并且应用程序很容易理解。

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

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

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

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

我发现，添加到Redux的应用程序/堆栈理想的路径是要等到之后你/应用/团队都感到痛苦，它解决了。一旦您开始看到长链的props构建和通过多个级别的组件传递，或者您发现自己在编排复杂的状态操作/读取，这可能表明您的应用程序可能会从引入 Redux 等人中受益。

我建议您使用“仅使用 React”构建的应用程序，看看 Redux 如何适应它。看看你是否可以通过一次取出一个状态或一组“动作”来优雅地引入它。朝着它重构，而不必纠结于对您的应用程序进行大刀阔斧的重写。如果您仍然无法看到它可以在哪里增加value，那么这可能表明您的应用程序不够大或不够复杂，无法在 React 之上使用 Redux 之类的东西。

如果您还没有遇到过它，Dan（上面的回答）有一个很棒的短视频系列，它在更基础的层面上介绍了 Redux。我强烈建议花一些时间来吸收它的一部分：https : //egghead.io/series/getting-started-with-redux

Redux 也有一些非常棒的文档。特别是解释了很多“为什么”，比如http://redux.js.org/docs/introduction/ThreePrinciples.html

我准备了这份文档来了解 Redux。希望这可以消除您的疑虑。

-------------------------- REDUX 教程 ----------------------

操作 - 操作是将数据从您的应用程序发送到商店的信息负载。它们是来自商店的唯一信息来源。您只能使用 store.dispatch() 发送它们。

   Example-
const  ADD_TODO = 'ADD_TODO'

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

动作是普通的 javascript 对象。Action 必须有一个 [ type ] 属性来指示正在执行的操作的类型。该类型应定义为字符串常量。

ACTION CREAToRS----- ---------------- ---- 动作创建者正是创建动作的函数 很容易混淆术语 - 动作和动作创建者。在 redux action 中，creator 返回一个 action。

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

初始化 dispatch 将结果传递给 dispatch() 函数。

1. dispatch(addToDo(text));
2. 调度（完成待办（索引））

或者，您可以创建一个自动调度的绑定动作创建者。

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

现在你可以直接调用它

boundaddTodO(text);

dispatch() 函数可以直接从 store.dispatch() 访问。但我们使用帮助程序 connect() 方法访问它。

动作.js........................

行动…………

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

动作创作者

导出函数 addToDO(text){ return { type: ADD_TODO, text } }

......................减速器...................... .....

Reducers 指定应用程序状态如何响应发送到存储的操作而发生变化。

设计状态

在 redux 中，所有应用程序状态都存储在单个对象中。您必须存储一些数据以及一些状态。

{visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using redux', completed: true }, { text: 'Kepp 所有状态在单树中' } ] }

处理动作 ---------------- 减速器是纯函数，它们采用先前的状态和动作，并返回一个新状态。

(previousState, action) => newState

我们将从指定初始状态开始。Redux 将第一次以未定义的状态调用我们的减速器。这是我们返回应用程序状态的机会。

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;
}

你可以使用 ES6 处理 JS 的方式做同样的事情

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

................................. 店铺................ ………………

商店是将它们聚集在一起的对象。本店有以下责任

1. 保持应用程序状态
2. 允许通过 getState() 访问状态
3. 允许通过 dispatch() 更新状态
4. 通过订阅者（听众）注册听众

笔记。使用 combineReducers() 将多个减速器合二为一。

const store = createStore(todoapp); // todoapp 是reducer

首先，如果您不需要，则无需添加Redux到您的应用程序中！很简单，所以如果你根本不需要它，不要强迫自己将它包含在你的项目中！但这并不意味着 Redux 不好，它在大型应用程序中确实很有帮助，所以请继续阅读......

Redux 是一个 React 应用程序的状态管理器，Redux就像一个本地存储，可以跟踪你的状态，你可以在任何页面和你想要的路由中访问状态，与 Flux 相比，你只有一个存储，意味着真相的一个来源……

看这张图可以一目了然地了解 Redux 首先做什么：

这也是 Redux 自我介绍的方式：

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

它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序。最重要的是，它提供了出色的开发人员体验，例如实时代码编辑与时间旅行调试器相结合。

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

同样根据文档，有以下三个原则Redux：

1. 单一事实来源

2.状态为只读

3. 纯函数的变化

所以基本上当你需要一个存储来跟踪你的应用程序中你喜欢的任何东西时，Redux 很方便，你可以在你的应用程序的任何地方，通过任何路径访问它......只需使用 store.getState();

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

简单地说，如果您的应用程序会很大，有许多组件、状态和路由，请尝试从一开始就实现 Redux！它肯定会在路上帮助你！

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

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

Redux 是 JavaScript 应用程序的可预测状态容器，用于管理状态和状态转换，并且经常与 React 一起使用，

redux 的概念可以在下图中解释。

当用户在用户与组件交互时触发一个动作并且一个动作被分派到 store 时，store 中的 reducer 接受该动作并更新应用程序的状态并在 store 中有更新时存储在应用程序范围内的不可变全局变量中订阅状态的相应视图组件将得到更新。

由于状态是全局管理的，并且使用 redux 更容易维护。