什么是 Redux？

Redux 官网redux.js.org 首页的定义，清晰简单：

A Predictable State Container for JS Apps

维基百科给出的定义：Redux一个用于应用程序状态管理的开源JavaScript库。Redux经常与React搭配运用，但其也可以独立使用。

Redux是目前React生态中，最好的数据层框架

官网给出了如下四个关键词及对应的说明：

Predictable

Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
Centralized

Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
Debuggable

The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.
Flexible

Redux works with any UI layer, and has a large ecosystem of addons to fit your needs.

Redux 是一个用来管理数据状态和UI状态的 JavaScript 应用工具。随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state（状态），Redux 就是降低管理难度的。（Redux 支持 React、Angular、jQuery 甚至纯 JavaScript）

Redux 诞生的背景

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。

历史和发展

这个 PPT 中给出了详细的历史发展进程： blog.isquaredsoftware.com/presentatio…

Created by Dan Abramov for a talk at React Europe 2015 to demonstrate the idea of "time-travel debugging". Now the most widely used state management tool for React apps.

Redux 运行环境的配置

首先要确保我们已经安装了node.js、NPM以及React 然后在命令行中键入：

npm install --save redux --global
npm install --save react-redux --global
npm install --save-dev redux-devtools -global

在下载过程中如果遇到不便可以把npm替换为cnpm；或配置淘宝镜像

环境配置往往是劝退的一步，很痛苦，但是要有耐心，要敢于面对问题

查看下载好的 Redux 的信息

命令行键入：

npm info redux

可以看到以下信息：

redux@4.0.5 | MIT | deps: 2 | versions: 66
Predictable state container for JavaScript apps
http://redux.js.org

dist
.tarball: https://registry.npm.taobao.org/redux/download/redux-4.0.5.tgz
.shasum: 4db5de5816e17891de8a80c424232d06f051d93f

dependencies:
loose-envify: ^1.4.0      symbol-observable: ^1.2.0

maintainers:
- acdlite <npm@andrewclark.io>
- gaearon <dan.abramov@gmail.com>
- timdorr <timdorr@timdorr.com>

dist-tags:
latest: 4.0.5     next: 4.0.0-rc.1

published 3 months ago by timdorr <timdorr@timdorr.com>

可以说明两点：

Redux 运行的环境已经成功配置
已下载的就是最新版本4.0.5

三大原则

Single source of truth

The state of your whole application is stored as a tree of plain objects and arrays within a single store. (How much you put in the store is up to you - not all data needs to live there.)

State is read-only

State updates are caused by dispatching an action, which is a plain object describing what happened. The rest of the app is not allowed to modify the state tree directly.

Changes are made with pure functions

All state updates are performed by pure functions called reducers, which are (state, action) => newState

Reducer 和 action

首先应该了解 State 的概念和 Redux 中 state 的特点

App state is stored in plain objects, like this Todo example. There's no "setters", so that different parts of the code can’t change the state arbitrarily. That helps avoid hard-to-reproduce bugs.

Actions

To change something in the state, you need to dispatch an action. An action is a plain JS object with a type field. Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说我们要通过 store.dispatch() 将 action 传到 store

Actions 的格式非常自由。只要它是个带有 type 属性的对象就可以了。也正因为格式如此自由，所以事实上他们什么也做不了，为了让 action 做点事情，你需要 dispatch。

Action Creators

It is common to use action creator functions to encapsulate the process of creating action objects. This may seem like overkill for simple use cases, but consistent use of action creators leads to cleaner code and better reusability. Action creators are not required, but are a good practice. 。

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。Reducer 一定要保持纯净。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。

Redux 提供了一个 store 统一仓储库，组件通过dispatch将 state 传入 store，不用通过其他组件，并且组件通过subscribe从 store 获得到 state 的改变

在各个组件 state 改变的过程当中，Redux 不允许应用直接修改 state，而是要求使用载体 action 来描述 state 的变化，通过发送 action 到 store 来改变 state。action 如何改变 stroe？为了描述 action 如何改变 state tree ，我们需要编写 reducer

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state：

var someReducer = function(state,action){
    ...
    return state
}

React Redux 的初学者详尽指南