前言
参加了公司大拿组织的前端学习会，本来也是抱着学习的心态，React这块自己也就会写写一般的组件和界面，也没做过什么深入的研究。但是年后排到我分享了，也不能只听不说吧。正好之前看了一点redux作者写的系列教学视频，感觉说的非常到位，就把它翻译过来供大家阅读。我个人认为Redux中的很多思想其实在后端中体现更多，我也比较好理解，包括状态转移，不可变性对象，纯函数等等。原文在此，整个视频长度大约在121分钟。
概述
在提供给用户良好体验这件事上，状态管理起到了关键作用，并且它也是现代前端工程中比较难处理的一个点。Redux提供了一个稳定成熟的解决方案来让你在React应用中管理状态。通过一系列精密的模式，Redux能够将你的应用从一堆复杂晦涩的状态中解脱出来，使之能够优美得组织并浅显易懂。
Redux的设计原理并不新奇，它呈现给你了一个易于使用的工具，不仅提升了你的应用质量，也让你更深入的理解现代JS项目应该如何构建。
教程
基本原则
首先我们来熟悉Redux的几个原则：
- 无论你的应用是复杂还是简单，你的状态都是由一个不可变的js对象 (state or state tree) 来存储并表示
- 每当你要做状态的修改，你需要下发一个行为(action)来表明你需要做的修改，行为里面有一个属性是必须有的，就是它的类型(type)，用来唯一标明这个行为的意义
- 针对一个状态和一个行为，通过一个纯函数(pure function)来产生新的js对象来表示行为发生后的状态
在一切开始之前，我们先来讨论下纯函数和有副作用的函数：
// pure function 纯函数
function square(x) {
return x * x;
}
function squareAll(items) {
return items.map(square)
}
// Impure function 非纯函数，有副作用
function square(x) {
updateXInDatabase(x);
return x * x;
}
function squareAll(items) {
for (let i = 0; i< items.length; i++ ) {
items[i] = square(items[i])
}
}
上面四个函数做的事情是类似的，都是将一个输入的x平方并返回，但是第三个函数不能为纯函数的点就在于它还做了一个数据库操作，而第四个函数的问题是他修改了本身入参items的值，这个修改和数据库操作也就是我们说的副作用。从定义上讲，一个纯函数应该这样：
对于一个入参，无论什么时候什么情况，都会产生同样的输出，并且不会修改原有入参的属性
纯函数在代码推到和逻辑建立上比非纯函数会有比较大的优势，因为对于一个纯函数，你只需要考虑入参，就能推导出会得到的结果，而不需要考虑其他的因素。针对之前提到的Redux两个原则，Redux中所使用或者你传递给Redux的函数都应该是纯函数，这是Redux中的一个规约。
在Redux中，状态的转移是用了一个纯函数来完成，这个纯函数的入参是当前的状态(state)和一个下发行为(action)，出参是一个新的状态，并且不改变原本状态的值，类似于这样：
function reducer(state, action){
var newState = undefined;
/**
do something to transform
**/
return newState;
}
从计数器开始
我们了解了Redux的一个基本原则之后，我们来尝试一下自己写下第一个例子，以一个计数器为例：
const counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
expect(
counter(0, { type: 'INCREMENT'})
).toEqual(1);
expect(
counter(1, { type: 'INCREMENT'})
).toEqual(2);
expect(
counter(2, { type: 'DECREMENT'})
).toEqual(1);
expect(
counter(undefined, {})
).toEqual(0);
上面这个例子中，我们通过expect这个库来完成单元测试，然后这里面需要注意的是，我们函数里面针对每个行为都创建了一个新的状态，并且我们针对缺省的行为和状态有一个默认的初态和行为，这个非常关键。通过上面一段代码，我们构建了一个简易的reducer函数，这个函数通过一个状态和行为产生一个新的状态，并保证自己是纯函数。
实战第一发
在了解了我们的reducer之后，我们来使用redux进行我们实战的第一发，原文直接在页面上写的，翻译过程中我直接放到react工程中了。首先我们编写一个组件放置我们的reducer方法：
// in CounterReducer.js
export default function counter(state = 0, action) {
console.log('enter counter action' + action.type);
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};
然后我们在我们的计数器组件中这么写：
import React, { Component } from 'react';
import './App.css';
import {createStore} from 'redux'
import counter from './CounterReducer'
class Counter extends Component {
constructor(props) {
super(props);
this.store = createStore(counter);
this.state = {
count: this.store.getState()
};
this.store.subscribe(() => this.setState({count:this.store.getState()}));
}
render() {
return (
<div>
<p>
{this.state.count}
</p>
<div>
<button onClick={() => this.store.dispatch({type: 'INCREMENT'})}>+</button>
<button onClick={() => this.store.dispatch({type: 'DECREMENT'})}>-</button>
</div>
</div>
);
}
}
export default Counter;
其中我们需要注意的是这一行：
this.store = createStore(counter);
Redux通过createStore 方法根据你传入的reducer创建了一个js对象来存储你应用的状态，在才创建的时候这个状态处于你的初态，因为你并没有传入任何参数，所以reducer支持缺省和默认初态就显得重要了。然后这个对象支持几个方法：
- getState 获取当前的状态
- dispatch 下发行为来改变状态
-
subscribe 注册一个回调函数，在每次行为发生时调用
有了这三个函数，我们只需要在页面的按钮中加上按键回调，下发指定的行为，就能很好地控制我们的应用状态和展示，如图所示：计数器
createStore从无到有
在了解了实战之后，我们再来尝试一步步实现我们的createStore方法
首先我们来把骨架搭起来：
const createStore = (reducer) => {
let state;
const getState = () => state;
const dispatch = (action) => {
}
const subscribe = (listener) => {
}
return {getState, dispatch, subscribe};
}
根据我们之前的描述，createStore方法接受一个reducer函数作为入参，并返回一个对象来保存状态，这个对象支持getState、dispatch、subscribe三个函数。上面这个骨架这几点都满足，接下来我们再来看具体的实现。首先针对subscribe，我们需要有一个数组来存放我们注册上去的回调函数，供我们后续下发行为之后使用，另外，我们还可以在subscribe的时候返回一个handler用于取消注册，因此可以这样实现:
let listeners = [];
const subscribe = (listener) => {
listeners.push(listener)
return () => {
listeners = listeners.filter(l => l !== listener);
}
}
然后我们再来看dispatch，可以通过reducer和当前状态产生一个新的状态，然后遍历调用注册的回调：
const dispatch = (action) => {
state = reducer(state, action)
listeners.forEach(listener => listener());
}
然后为了在调用createStore的时候就能创建一个初态，我们需要显式调用一次dispatch，最终完成如下：
const createStore = (reducer) => {
let state;
let listeners = [];
const getState = () => state;
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};
}
最终我们使用自己实现的这个createStore来替换了Redux的实现，一切工作正常。
