Redux学习笔记（一）——Getting started with Redux by Redux creator Dan Abramov（上） – KarmaGut——Ever tried,Ever failed,No matter,Try again,Fail again,Fail better.
本文总结自Redux作者Dan Abramov的一系列以及自己的一些理解。
Redux并没有什么特殊的魔法，他是Reducer+Flux思想的产物。（具体Reducer是什么，将在下文解释）
一. 单一的不可变对象树（The Single Immutable State Tree）
在Flux中，应用的数据或者是UI的状态都是存储在stores中的，Flux允许单个应用存在多个store对象去管理应用中的不同数据（比如不同组件的状态）。这样往往可能会导致以下几个问题：
（1）不同的store之间可能保存了重复的数据，从整个应用的角度，出现了冗余。
（2）不同的store对象间往往存在着强耦合的依赖关系。因为对于被派发出来的同种类型的action对象，不同的store可能都需要对它进行响应，并改变自身存储的数据，此时如果这些store中的数据存在冗余或者A store中数据的更新依赖于B store中数据的更新（举个例子就是Summary组件中的sum值的更新依赖于Counter组件中count值的更新，具体详见），这就说明有时候不同的store对于同一action的处理往往是有先后顺序要求的，而Flux中的DispatcherInstance.waitFor()正是用于此种情况。
针对以上问题，为了能够减少应用冗余数据的产生，以及解耦不同store之间的依赖。Redux干脆就将整个应用的数据或者是UI的状态保存到一个不可变的（Immutable）对象树中。这就引出了Redux三大原则中的第一个原则：唯一数据源（single Source Of Truth）。这就意味着，在使用Redux管理数据的应用中，每当派发一个action，那么这个唯一的store对象就会根据这个action的类型，局部更新状态对象树上的数据。引用Dan Abramov的原话就是：Everything that changes in your application, including the data and UI state, is contained in a single object, we call the state or the state tree.
但是，把应用中的所有数据放在单一的对象中，并不能保证数据不会出现冗余，所以往往还需要这种工具去范式化state对象树（类似于数据库中，不同表存储不同的数据，然后表间通过主键和外键互相引用，从而尽量减少整个数据库中出现冗余数据的思想）。所以，当我们开始构建项目的时候，思考应用对象树存放数据的具体结构也是非常重要的。
二. 保持状态只读（Describing State Changes with Actions）
Redux三大原则中的第二个原则就是：对象状态树是只读的。这就意味着，在Redux中，保存数据的对象状态树是不能被直接修改的。而原生的js对象并无法保证这一点，所以我们往往需要使用immutable.js提供的不可变对象的数据结构来保存对象状态树。实际上，这里的只读的含义是指：除了当应用中的store对象接收到action，并调用对应的reducer方法局部更新对象状态树这种情况，不允许应用中使用其他任何一种方式去改变对象状态树中的数据。这条原则其实是基于Flux中所提出的单向数据流原则。在传统的前端MVC框架中，往往会出现view层中不同的视图改变model中的数据，而model中的数据又会引发view层中的一些视图的改变的情况，这样应用中数据的流动就不是单向的，当应用的功能变得复杂时，就容易导致无法追踪究竟是应用中的哪些变化导致某个视图的改变。此时如果应用视图显示出现异常，就会难以追踪数据源的改变并进行调试。究其原因，就是许多的MVC框架允许不同的view和model直接通信。
所以，在Flux中，坚持单向数据流的原则，尽管Flux中允许存在多个存放数据的store对象，但是这些store对象只提供了一个getter接口，让view或者是view controller能够获取其中的数据。这些store并不提供setter接口，让你去直接修改其中的数据。那么，在Flux中，修改store中数据的唯一方式就是当store对象接收到Dispatcher实例派发出来的action对象时，才会根据接收到的action对象的类型改变其存储的数据，并以触发事件的形式通知所有监听当前store中数据变化的view或者是view controller，从而更新对应的视图。
Redux自然是继承了Flux单一数据流的思想，尽管Redux中的数据是存储在一个单一的对象状态树中，同样不允许直接修改它，也只能通过接收action对象的形式来局部改变对象树。这样，应用中数据的变化将是可追踪的，当代码出现异常时，查看store对象是接收的哪个action对象即可知道是何种行为导致异常的产生，异常的数据又是从何而来。
总之，在Redux应用中，任何你想要改变数据的时候，都必须通过派发一个action来实现。（在Redux中并没有Dispatcher，所以派发action的工作由store对象来承担，store.dispatch(action)）。
接着简单介绍一下什么是action对象，action对象就是一个用来描述应用中数据改变的对象。比如在一个Counter计数器中，当用户点击增加按钮时，会导致应用数据中的count值加一，此时只需要派发一个类似于下面的action对象：
type: &INCREMENT&
对于action对象，Dan Abramov有一段非常言简意赅的解释：Just like the state is the minimal representation of the data in your app, the action is the minimal representation of the change to the data.这句话中的重点应该是minimal。action对象中不应该出现无谓的数据，应当尽量用最简的形式来描述数据的变化（而不是描述如何变化，这部分应当是处理action对象的reducer函数中的逻辑）。
再比如，更加复杂一点的情景，比如有一个添加待办事项的应用，用户在输入框中输入待办事项，然后点击提交按钮就会在下方显示该条新增的待办事项。毫无疑问，点击按钮会导致派发一个action，此时该action对象仅通过type属性是无法描述这一改变的。首先，我们需要另一个字段text来保存用户的数据。其次就是一个id值，这个id值在添加的时候不会用到，但是当我们的用户要删除该条待办事项时，id就起到作用了。ADD_TODO类型的action对象如下：
type: &ADD_TODO&,
text: &hey&
删除该待办事项时派发的DELETE_TODO类型的action对象如下：
type: &DELETE_TODO&
总之，action对象应当是能够完全描述数据改变的最小化的对象。
具体如何定义action对象，实际上是有官方规范和建议的，具体可以查看。
三. 纯函数和非纯函数（Pure and Impure Functions）
Redux三大原则中的第三个原则就是：数据改变只能通过纯函数完成。在Redux中数据的改变由自定义的reducer(state, action)函数来完成的，这就说明定义的reducer函数必须是纯函数。那么什么是纯函数呢？
纯函数实际上就是指一类不具有任何副作用（side-effect）的，输出完全可预测的函数，它们具有以下的特点：
（1）不会改变输入的参数；（js中这主要针对引用类型的参数，比如对象和数组，纯函数中的代码是不会改变传入的对象和数组的）
（2）不会改变应用的任何状态；（纯函数中不会有任何产生副作用的操作，所谓的副作用就是纯函数的执行不会改变应用的状态，这就能保证纯函数的输出结果是可预测的，只要传入的参数相同，无论执行多少次，必然能够得到相同的确定的结果）
例如：以下函数都是纯函数
function square(x){
return x *
function squareAll(items){
items.map((x) =& x * x);
而以下函数就是非纯函数：
//在函数执行时，改变的应用的状态（修改了数据库中的值）
function square(x){
updateXInDataBase(x);
return x *
//在函数执行时，改变了传入的参数数组items
function squareAll(items){
for (let i = 0; i & items. i++){
items[i] = square(items[i])
四. Reducer函数（The Reducer Function）
在React视图框架中，使用纯函数来描述UI和视图层的状态（比如返回JSX的render函数必须是纯函数），将使他们变得更加可预测（more predictable）（其他的一些框架比如Ember或者是Angular也采用了这种形式）。
Redux也采用了这种思想，那就是你的应用中状态对象树的改变必须由一个纯函数来完成（描述），而这个函数就是Reducer函数。Reducer可以类比于reduce方法去理解，js提供的reduce方法允许我们传入一个回调函数，该函数接收两个参数，第一个参数为前一次运算的结果，第二个参数则是本次要参与运算的值。Redux中的Reducer函数就是类似于前面描述的reduce方法中的回调函数，它接收state（previous state）和action作为参数，state是调用Reducer函数时，当前应用的状态，而action对象则是应用将要改变的状态的描述，Reducer函数的作用就是把action中的改变“整合”（这里的整合之所以打引号，是因为Reducer必须是纯函数，所以不能直接修改传入的state对象（previous state），只能通过混入等方式把改变更新到一个新的state对象（next state）中，并将该对象作为应用最新的状态返回）到应用当前的状态中，最终返回一个新的state作为应用最新的状态，这样就完成了一次应用数据状态的更新过程。
五. Reducer函数举例（Writing a Counter Reducer with Tests）
接下来将会以一个Counter组件为例，写一个Reducer函数，并对其进行单元测试（由于这个例子很简单，所以state并不是一个对象，而仅仅是一个用于保存count值的Number类型的值）。
处理更新Counter组件改变的Reducer——counter函数代码如下（假设代码放在./reducer.js文件下）：
const counter = (state = 0, action) =& {
if (action.type === &INCREMENT&) {
return state + 1;
} else if (action.type === &DECREMENT&) {
return state - 1;
相关的单元测试代码如下：
counter(0, {type: &INCREMENT&})
).toEqual(1);
counter(1, {type: &INCREMENT&})
).toEqual(2);
counter(2, {type: &DECREMENT&})
).toEqual(1);
counter(1, {type: &DECREMENT&})
).toEqual(0);
//判断当counter函数接收到其他类型并不由它处理的的action时，是否能直接返回当前应用的状态。
counter(1, {type: &SOMETHING_ELSE&})
).toEqual(1);
//判断当counter函数接收到的state是undefined或者压根没有传入state，counter函数中是否设置了默认的state值（这里要求state的默认值被设置为0）。
counter(undefined, {})
).toEqual(0);
console.log(&Tests passed!&);
一切运行正常，所以运行测试，最终控制台会打印Tests passed!。
六.Store对象的一些方法（Store Methods: getState(), dispatch(), and subscribe()）
在前面我们已经为我们的Counter组件创建好了处理其上数据改变的Reducer函数，接下来就可以根据该Reducer函数创建我们应用的Store对象了。
新建一个用于创建Store对象的文件：
//导入我们已经创建好的reducer函数counter：
import counter from &./reducer&;
//接着导入创建Store对象需要的包（当然前提是已经通过npm在项目中安装该包， `npm install --save redux` ）：
import { createStore } from &redux&;
const store = createStore(reducer);
//store.getState()返回应用当前的状态，比如在没有接收任何action对象的情况下，此时返回值是0（counter中state所设置的默认参数）：
console.log(store.getState());
//store.dispatch()方法用于派发一个action对象：
store.dispatch({ type: &INCREMENT& });
//派发之后，打印一下当前的state，得到更新后的返回值1
console.log(store.getState());
//store.subscribe()方法用于订阅应用state对象的改变，它接收一个回调函数作为参数，当应用的state对象状态树发生改变时，就会执行该回调，所以传入的回调中往往会执行更新渲染操作，比如调用this.setState()方法；
const render = () =& {
document.body.innerText = store.getState();
store.subscribe(render);
document.addEventListener(&click&, () =& {
store.dispatch({ type: &INCREMENT& });
//以上代码将会使页面初始时页面中显示数字1，然后当用户点击页面时，数字会自动增加。
熟悉Flux的同学一定会发现上面代码有一个不同之处（与Flux相比）。store.subscribe()方法订阅了整个state数据的更新（尽管这里的state很简单，只是一个Number类型的count值），在一般的项目中，state必然是一个对象树的结构。那么，问题来了，store.subscribe()订阅的是整个对象树的变化，这就意味着，只要是应用的状态对象树发生了变化，所有监听了对象树的回调都会被触发执行，无论对象树上发生变化的那一部分数据是否与当前订阅的数据相关。
（这不科学啊！！！难道是通过this.setState来局部更新，如果对应的对象没有变化，this.state也就不会修改？）
而在Flux中，因为存在着多个store对象管理着不同的数据，当某个store中的数据发生变化时，就会通过this.emit(CHANGE_EVENT)方法触发一个事件，然后view或者是view controller中监听（订阅）了这个事件的（通过事件类型常量来区分不同的事件，从而确定是否是自己订阅的存放在对应store中的数据发生了变化）视图组件才会进行相应的更新。
七. 自实现一个store对象（Implementing Store from Scratch）
在前面的例子中，我们使用redux包提供的createStore方法创建了一个store对象，在项目中这样使用没有任何问题，但是为了让我们能够更好的理解store对象，在本节，将会自实现一个createStore方法，以理解store对象具体是如何创建的，以及store对象中各API的定义以及内在的运行的机制。代码如下：
const createStore = (reducer) =& {
let listeners = [];
const getState = () =&
const dispatch = (action) =& {
state = reduce(state, action);
//从这里可以看出，每当一个action对象被派发出来并被reducer方法处理后，所有的监听state变化的事件处理回调函数都会被调用。
listeners.forEach((listener) =& listener());
const subscribe = (listener) =& {
listeners.push(listener);
//调用的subscribe方法会返回一个函数，这个函数其实就是unsubcribe方法，调用这个方法可以立刻取消当前绑定的事件处理回调函数（实质上就是在listeners数组中移除该回调函数）
return () =& {
listeners = listeners.filter(l =& l !== listener);
//派发一个dummy action（空对象），然后让reducer能够返回一个预先在reducer中设置好的state的初始值
dispatch({});
八. 结合React视图组件使用为例（React Counter Example）
在较为复杂的应用中，我们往往已经不再会采用手动更新DOM的方式来更新视图了。更多的是采用类似于React这样的视图框架，能够进行自动的更新，只要你定义好相关的更新逻辑即可。下面将还是以上面的Counter组件为例，具体看看React如何与Redux结合起来使用：（使用react必须先引入react包和react-dom包）
首先需要修改的就是我们的render函数：（每当Redux中的store对象维护的state对象树发生改变后，就会调用render回调进行更新渲染）
const render = () =& {
ReactDOM.render(
value={store.getState()}
onIncrement={() =& {
store.dispatch({
type: &INCREMENT&
onDecrement={() =& {
store.dispatch({
type: &DECREMENT&
document.getElementById(&root&)
然后就是Counter组件的内容（因为Counter组件只负责从props（即传入的store.getState()获取到的state对象）获取数据然后渲染，Counter组件并不需要维护自己的状态，所以这里采用无状态组件的方式）：
const Counter = ({ value, onIncrement, onDecrement}) =& (
&h1&{value}&/h1&
&button onClick={onIncrement}&+&/button&
&button onClick={onDecrement}&-&/button&
在Counter组件中,为了提高组件的可复用性，我们并不希望把点击按钮的逻辑硬编码到Counter组件中，所以依旧是从外部获取回调onIncrement和onDecrement。剩下的部分代码依旧是：
store.subsrcibe(render);
由此可见，Redux能够很好的和React视图组件结合使用，一个管理应用的数据，一个用于显示应用的数据，并能够自动更新的视图组件。实际上，这个例子所要体现的最主要的一点就是，当React和Redux结合使用时，应用的数据和组件的状态都同一保存到store对象维护的state对象树中，那么React中的组件往往就不再需要维护自己的状态，只要能够从store中获取并监听state对象数据的变化，然后相应地改变视图层就可以了。所以，React组件最好使用无状态组件的形式，即常说的傻瓜组件。（更好的管理数据，并解耦数据和视图）
九. 使用数组的concat，slice方法或者是展开运算符…来避免改变原数组（Avoiding Array Mutations with concat(), slice(), and …spread）
前面在介绍Reducer时已经提到过，Reducer必须是纯函数，这就意味着在更新state对象的过程中绝对不能在原有state对象的基础上进行修改，这违背了纯函数的定义。那么，特别是针对引用类型的数组和对象，我们应该采用何种方式来返回一个新的state对象而不改变旧的state对象呢？其实可选的方法有很多吗，接下里将简单介绍一下几种方法。
在下面的测试例子中，需要用到一个小的工具，这个工具返回一个函数（deepFreeze()）,我们可以把想要被冻结的Object（广义上的，包括数组，函数等）作为参数传入，那么返回的Object将会是被冻结的（无非就是递归调用Object.freeze()，确保对象中的所有深层属性都是冻结的）。经过该函数处理后，就再也无法修改被冻结的对象了（non-Extension，configurable:false，writable:false）。
由于deep-freeze方法的源码很简单，所以，在这里贴出来：
module.exports = function deepFreeze (o) {
Object.freeze(o);
Object.getOwnPropertyNames(o).forEach(function (prop) {
//o.hasOwnProperty()个人认为是没有必要的，属于多余的二次判断
if (o.hasOwnProperty(prop)
&& o[prop] !== null
&& (typeof o[prop] === &object& || typeof o[prop] === &function&)
&& !Object.isFrozen(o[prop])) {
deepFreeze(o[prop]);
以下是一个测试的例子：
const deepFreeze = require(&deep-freeze&);
//待测函数：
const addCounter = (list) =& {
list.push(0);
//测试代码：
const testAddCounter = () =& {
const ListBefore = [];
const ListAfter = [0];
//但是如果这里冻结ListBefore，那么测试将无法通过！因为，push方法是在原数组上进行修改
//deepFreeze(ListBefore);
addCounter(ListBefore)
).toEqual(ListAfter);
testAddCounter();
console.log(&All tests pasted!&);
上面这个简单的例子告诉我们，在修改state的对象中的数组时，不能采用push方法，它会改变原有数组。但是如果addCounter方法中的代码改为：
return list.concat([0]);
//或者是：
return [...list, 0];
那么测试将会在添加deepFreeze下通过，而这正是在纯函数中需要采用的方式之一。那么，如果是从数组中移除数据呢？测试如下：
const removeCounter = (list, index) =& {
//方法一：使用splice方法
return list.splice(index, 1);
//方法二：使用slice方法
//return list.slice(0, index).concat(list.slice(index + 1));
//方法三：结合spread运算符与slice方法
//return [...list.slice(0, index), ...list.slice(index + 1)]
const testRemoveCounter = () =& {
const ListBefore = [0, 10, 20];
const ListAfter = [0, 20];
//deepFreeze(ListBefore);
removeCounter(ListBefore, 1);
).toEqual(ListAfter);
testRemoveCounter();
console.log(&All tests pasted!&);
在以上代码中，只有方法一无法通过添加deepFreeze后的测试，方法二和方法三都可以。所以，要想保证不修改原数组，一定要使用slice方法或者是spread运算符。
十. 使用Object.assign()以及展开运算符…来避免改变原对象（Avoiding Object Mutations with Object.assign() and …spread）
例子如下：
const toggleTodo = (todo) =& {
//方法一：直接修改todo对象上的complete属性
todo.completed = !todo.
//方法二：使用ES6提供的Object.assign()混入
//return Object.assign({}, todo, {
completed: !todo.completed
//方法三：使用ES7提供的对象展开运算符
//return {
todo.completed: !todo.completed
const testToggleTodo = () =& {
const todoBefore = {
text: &study!&,
completed: false
const todoAfter = {
text: &study!&,
completed: true
//deepFreeze(todoBefore);
toggleTodo(todoBefore)
).toEqual(todoAfter);
testToggleTodo();
console.log(&All tests pasted!&);
同样方法一因为直接修改了对象todo所以无法通过添加了deepFeeze的测试，而方法二和方法三均可，这也是我们可以在Reducer函数中采用的改变更新state对象的方式。
共享此文章：
2018年七月
91112131415
16171819202122
23242526272829Redux 入门教程（一）：基本用法 - 阮一峰的网络日志
Redux 入门教程（一）：基本用法
一年半前，我写了，介绍了 React 的基本用法。
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
组件之间的通信
对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
为了解决这个问题，2014年 Facebook 提出了
架构的概念，引发了很多的实现。2015年， 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。
本文详细介绍 Redux 架构，由于内容较多，全文分成三个部分。今天是第一部分，介绍基本概念和用法。
零、你可能不需要 Redux
首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。
曾经有人说过这样一句话。
"如果你不知道是否需要 Redux，那就是不需要它。"
Redux 的创造者 Dan Abramov 又补充了一句。
"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"
简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
用户的使用方式非常简单
用户之间没有协作
不需要与服务器大量交互，也没有使用 WebSocket
视图层（View）只从单一来源获取数据
上面这些情况，都不需要使用 Redux。
用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了WebSocket
View要从多个来源获取数据
上面这些情况才是 Redux 的适用场景：多交互、多数据源。
从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。
某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。
总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web
架构的一种解决方案，也可以选择其他方案。
一、预备知识
阅读本文，你只需要懂 React。如果还懂 Flux，就更好了，会比较容易理解一些概念，但不是必需的。
Redux 有很好的，还有配套的小视频（，）。你可以先阅读本文，再去官方材料详细研究。
我的目标是，提供一个简洁易懂的、全面的入门级参考文档。
二、设计思想
Redux 的设计思想很简单，就两句话。
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
请务必记住这两句话，下面就是详细解释。
三、基本概念和 API
Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。
import { createStore } from 'redux';
const store = createStore(fn);
上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。
3.3 Action
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个可以参考。
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。
可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。
3.4 Action Creator
View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO';
function addTodo(text) {
type: ADD_TODO,
const action = addTodo('Learn Redux');
上面代码中，addTodo函数就是一个 Action Creator。
3.5 store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。
结合 Action Creator，这段代码可以改写如下。
store.dispatch(addTodo('Learn Redux'));
3.6 Reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
const reducer = function (state, action) {
return new_
整个应用的初始状态，可以作为 State 的默认值。下面是一个实际的例子。
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.
const state = reducer(1, {
type: 'ADD',
payload: 2
上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。
实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。
为什么这个函数叫做 Reducer 呢？因为它可以作为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。
const actions = [
{ type: 'ADD', payload: 0 },
{ type: 'ADD', payload: 1 },
{ type: 'ADD', payload: 2 }
const total = actions.reduce(reducer, 0); // 3
上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数作为参数，就可以直接得到最终的状态3。
3.7 纯函数
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。
不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。
// State 是一个对象
function reducer(state, action) {
return Object.assign({}, state, { thingToChange });
return { ...state, ...newState };
// State 是一个数组
function reducer(state, action) {
return [...state, newItem];
最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。
3.8 store.subscribe()
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
unsubscribe();
四、Store 的实现
上一节介绍了 Redux 涉及的基本概念，可以发现 Store 提供了三个方法。
store.getState()
store.dispatch()
store.subscribe()
import { createStore } from 'redux';
let { subscribe, dispatch, getState } = createStore(reducer);
createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。
let store = createStore(todoApp, window.STATE_FROM_SERVER)
上面代码中，window.STATE_FROM_SERVER就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。
下面是createStore方法的一个简单实现，可以了解一下 Store 是怎么生成的。
const createStore = (reducer) => {
let listeners = [];
const getState = () =>
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
dispatch({});
return { getState, dispatch, subscribe };
五、Reducer 的拆分
Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。
请看下面的例子。
const chatReducer = (state = defaultState, action = {}) => {
const { type, payload } =
switch (type) {
case ADD_CHAT:
return Object.assign({}, state, {
chatLog: state.chatLog.concat(payload)
case CHANGE_STATUS:
return Object.assign({}, state, {
statusMessage: payload
case CHANGE_USERNAME:
return Object.assign({}, state, {
userName: payload
上面代码中，三种 Action 分别改变 State 的三个属性。
ADD_CHAT：chatLog属性
CHANGE_STATUS：statusMessage属性
CHANGE_USERNAME：userName属性
这三个属性之间没有联系，这提示我们可以把 Reducer 函数拆分。不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer 即可。
const chatReducer = (state = defaultState, action = {}) => {
chatLog: chatLog(state.chatLog, action),
statusMessage: statusMessage(state.statusMessage, action),
userName: userName(state.userName, action)
上面代码中，Reducer 函数被拆成了三个小函数，每一个负责生成对应的属性。
这样一拆，Reducer 就易读易写多了。而且，这种拆分与 React 应用的结构相吻合：一个 React 根组件由很多子组件构成。这就是说，子组件与子 Reducer 完全可以对应。
Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
import { combineReducers } from 'redux';
const chatReducer = combineReducers({
statusMessage,
export default todoA
上面的代码通过combineReducers方法将三个子 Reducer 合并成一个大的函数。
这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名。如果不同名，就要采用下面的写法。
const reducer = combineReducers({
a: doSomethingWithA,
b: processB,
function reducer(state = {}, action) {
a: doSomethingWithA(state.a, action),
b: processB(state.b, action),
c: c(state.c, action)
总之，combineReducers()做的就是产生一个整体的 Reducer 函数。该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象。
下面是combineReducer的简单实现。
const combineReducers = reducers => {
return (state = {}, action) => {
return Object.keys(reducers).reduce(
(nextState, key) => {
nextState[key] = reducers[key](state[key], action);
return nextS
你可以把所有子 Reducer 放在一个文件里面，然后统一引入。
import { combineReducers } from 'redux'
import * as reducers from './reducers'
const reducer = combineReducers(reducers)
六、工作流程
本节对 Redux 的工作流程，做一个梳理。
首先，用户发出 Action。
store.dispatch(action);
然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化，Store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
function listerner() {
let newState = store.getState();
component.setState(newState);
七、实例：计数器
下面我们来看一个最简单的实例。
const Counter = ({ value }) => (
&h1>{value}&/h1>
const render = () => {
ReactDOM.render(
&Counter value={store.getState()}/>,
document.getElementById('root')
store.subscribe(render);
上面是一个简单的计数器，唯一的作用就是把参数value的值，显示在网页上。Store 的监听函数设置为render，每次 State 的变化都会导致网页重新渲染。
下面加入一点变化，为Counter添加递增和递减的 Action。
const Counter = ({ value, onIncrement, onDecrement }) => (
&h1>{value}&/h1>
&button onClick={onIncrement}>+&/button>
&button onClick={onDecrement}>-&/button>
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
const store = createStore(reducer);
const render = () => {
ReactDOM.render(
value={store.getState()}
onIncrement={() => store.dispatch({type: 'INCREMENT'})}
onDecrement={() => store.dispatch({type: 'DECREMENT'})}
document.getElementById('root')
store.subscribe(render);
完整的代码请看。
Redux 的基本用法就介绍到这里，介绍它的高级用法：中间件和异步操作。
一、问题的由来
学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。
JavaScript 程序越来越复杂，调试工具的重要性日益凸显。客户端脚本有浏览器，Node 脚本怎么调试呢？