通过Redux源码学习基础概念一：简单例子入门

    最近公司有个项目使用react+redux来做前端部分的实现，正好有机会学习一下redux，也和小伙伴们分享一下学习的经验。

首先声明一下，这篇文章讲的是Redux的基本概念和实现，不包括react-redux。

源码地址：https://github.com/lyc-chengzi/reactProject

首先说一下我理解的Redux：

它只是一个管理数据的一个工具，帮助我们创建app中唯一的一个数据结构的树，并且按照约定的方法来管理这颗树，让我们的数据的更改变为可预测的。

任何一个普通的框架，或者如angular， jquery等都可以依赖于这个数据结构，来做自己的事情。

 

react-redux：

这个库则是帮助我们将react组件和redux创建的数据树串联起来，让普通的react组件根据state来重新渲染。

以后可能也会有angular-redux， jquery-redux等等库，帮助我们实现其他框架的ui渲染。

 

好了，下面进入正题：

Redux的运行原理

1. 先定义好我们的reducer -> 2. 组装reducer -> 3. 调用redux.createStore创建一个store -> 4. store调用dispatch方法 ->5. 触发你写的reducer -> 6. 返回新的state

举一个简单的例子，我们的app就是一个计数器，实现加和减的功能，一个最简单的数据结构：{counter: 0};下面开始按照上面的步骤实现

1. 先定义一个我们的reducer，其实就是一个回调函数

function counter(state = 0, action){
    switch (action.type){
        case 'counter_add':
            return ++state;
            break;
       
        default:
            return state;
    }
}

reducer固定会接收两个参数，state和action。

reducer的作用就是接受一个旧的state，然后内部加工处理后，返回一个新的state给redux，这就是reducer的职能：扩展或修改原有state并返回！

第一个参数state就是redux告诉我们的更改前的数据，我们以此为基础做一些操作。具体是那些操作，就通过第二个参数action告诉我们。

如上面的代码，通过action.type，我们处理了counter_add action，即数字加1操作，我们把state+1；其他未知操作我们直接返回原有state。

这样一个最简单的reducer就创建完了，是不是很简单? 就是一个普通的回调函数

 

2. 组装reducer

var app = function(state = {}, action){
    return {counter: counter(state.counter, action)};
};

这一步的目的是返回一个根reducer，因为默认state为undefined，所以我们给state一个默认值{}。根reducer返回一个json对象，key为名称，value为具体的实现reducer

3. 创建store

let store = redux.createStore(app);
console.log(store.getState());

 

简单的2行代码，通过我们定义的根reducer，redux创建一个store对象返回给我们。

我们只能通过dispatch方法来改变整个app的state,调用getState方法查看初始化后的数据结构

4. 调用dispatch，来实现计数器增加

store.dispatch({type: 'counter_add'});
console.log(store.getState());

dispatch方法只接受一个action参数。

action为一个json对象：必须包含type属性，用来标识是哪一个action，也可以有其他属性作为附加值传递到reducer

这里我们传递了'counter_add'告诉redux。

这个action会从你的根reducer一直传递下去，到末级reducer。只要我们定义的reducer处理这个action，就会更新state。

然后我们打印最新的state，如下

 

如果我们要更新state，只能通过调用store.dispatch方法，传递action参数。然后redux会调用我们的reducer来处理这个action，最后return 最新的state。

下面我们通过源码来看一下关键的两个函数是如何运行的。

1. createStore

function createStore(reducer, preloadedState, enhancer) {
     var currentReducer = reducer;
     var currentState = preloadedState;
     var currentListeners = [];
     var nextListeners = currentListeners;
     var isDispatching = false;

    dispatch({ type: ActionTypes.INIT });

  return _ref2 = {
    dispatch: dispatch,
    subscribe: subscribe,
    getState: getState,
    replaceReducer: replaceReducer
  }, _ref2[_symbolObservable2['default']] = observable, _ref2;
}

 

上面是createStore的关键代码。

使用了闭包的技巧，隐藏了几个关键变量：  

currentReducer=>我们传入的根reducer

currentState => 当前默认state，我们默认为一个空json对象{}

nextListeners和currentListeners用来保存监听函数，当我们调用dispatch方法时会触发

isDispatching => 当前调度状态，只有当前调度状态是false时才会执行dispatch方法

初始化完几个关键内部变量后，执行了一次默认的dispatch方法，action.type为reduxInit

最后返回了一个包装对象，包含了对外公开的方法。我们只能通过这几个方法来操作内部的变量。

（虽然可以var state= store.getState();获取state之后直接修改，但千万不要这么做，不然redux也没有意义了。个人认为如果getState（）返回一个clone的currentState会更好）

2.我们来看一下dispatch都干了些什么

function dispatch(action) {
    if (!(0, _isPlainObject2['default'])(action)) {
      throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
    }

    if (typeof action.type === 'undefined') {
      throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.');
    }

    try {
      isDispatching = true;
      currentState = currentReducer(currentState, action);
    } finally {
      isDispatching = false;
    }

    var listeners = currentListeners = nextListeners;
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]();
    }

    return action;
  }

非常简单，只是调用了你根reducer函数，然后将内部保存的当前state，和action传了过去，剩下的都是你的reducer干的事情了。

所以createStore默认调用了一次dispatch，action.type为init，我们的reducer没有对应的处理方法，直接将默认的state返回了回去。

现在也就明白了为什么我们的reducer为什么要在default的时候返回变化前的state。

所以总结一下redux，就是dispatch的过程，（因为createStore也是dispatch，不过是在内部调用的），每一次dispatch都会调用一次我们的根reducer，然后重新构建一遍数据，

然后把新的数据保存起来。

 

到此我们就把一个最简单的redux例子学完了。下一篇将会介绍另一种组装reducer的方法：通过调用

redux.combineReducers

方法让redux帮我们构建数据结构，并且演示如何做多级的数据结构