[译]从零开始Redux（一）初体验

前言

参加了公司大拿组织的前端学习会，本来也是抱着学习的心态，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的实现，一切工作正常。