Redux是一个程序架构，源于Flux（Facebook提出的一种架构），然而，它不仅可以应用于React，还可以应用于其他任何框架中。值得一提的是，Redux的源代码很少，但是他的逻辑拆分和函数式编程的设计思想是非常值得学习的。

1. 解决的问题

当一个JavaScript单页应用变得越来越复杂时，我们要处理的数据（model）也变得越来越庞大，随之而来的是每个数据的状态（state）会变得难以维护。当一个model改变时，我们可能要手动处理由此引发的其他model的变化，更糟糕的是，其他model变化可能又会引起另一些model的变化，这样产生连锁反应。最后我们很容易就会不记得model在什么时候以及如何发生改变。这正是Redux可以解决的最大痛点之一—以统一的方式管理数据状态。
统一的数据状态管理体现为以下2个方面：

• 组件间的数据通信
• UI和数据处理逻辑分离

2.三大原则

• 单一数据源
  整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
• State是只读的

  唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

• Reducer必须是纯函数

3.基本概念

• Action

  Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。直白的说，action就是一种消息类型，他告诉Redux是时候该做什么了，并带着相应的数据传到Redux内部（即接下来介绍的Reducer）。
  Action就是一个简单的对象，其中必须要有一个type属性，用来标志动作类型（reducer以此判断要执行的逻辑），其他属性用户可以自定义，但要尽量简单。如：

  {type: SET_ALL,index: 5}

• Action Creator
  Action Creator是一个用来自动生成Action的函数，这也是Redux函数式编程的一种体现。通常，我们会按照业务逻辑或组件把相关的Action Creator放在一个文件中，形式如下：

  export const SHOW_SLIDER = 'SHOW_SLIDER';
  export const RIGHT_SLIDER = 'RIGHT_SLIDER';
  
  export const showSliderAction = (index) => {
      return {
          type: SHOW_SLIDER,
          index
      };
  }
  export const rightSliderAction = (length) => {
      return {
          type: RIGHT_SLIDER,
          length
      };
  }

  其中showSliderAction和rightSliderAction就是Action Creator。
  由于Action Creator的形式大体相同，我们还可以创建一个用来生成Action Creator的函数以进一步简化。

  export const makeCreateAction = (type, ...keys) => {
      return (...data) => {
          let action = {type};
          keys.forEach((v,i) => action[v] = data[i]);
          return action;
      }
  }
  export const showSliderAction = makeCreateAction(SHOW_SLIDER, index);
  export const rightSliderAction = makeCreateAction(RIGHT_SLIDER, length);

• Reducer
  Reducer 指定了应用状态的变化如何响应 actions 并发送到 store 的，action只是告诉Redux该干什么了，并没有告诉他怎么干，而reducer就是根据action处理state如何改变的逻辑。
  Reducer必须是一个纯函数（原因稍后解释），他根据action处理state的更新，如果没有更新或遇到未知action，则返回旧state；否则返回一个新state对象。注意：不能修改旧state，必须先拷贝一份state，再进行修改，也可以使用Object.assign函数生成新的state。另外，state参数需先进行初始化。实例代码如下：

  //初始状态
  let initialState = {hiddenClass: 'g-hidden',currentIndex:0};
  
  let sliderReducer = function (state = initialState, action) {
      switch(action.type){
          case sliderAction.SHOW_SLIDER:
              return {hiddenClass: '',currentIndex:action.index};
          case sliderAction.RIGHT_SLIDER:
              if(state.currentIndex == action.length-1){
                  return Object.assign({}, state, {currentIndex:0});
              }else{
                  return Object.assign({}, state, {currentIndex:Number.parseInt(state.currentIndex)+1});
              }
          default:
              return state;
      }
  }
  
  export default sliderReducer;

  使用纯函数的原因：

  首先，纯函数的特点是：
         •函数的返回结果只依赖于它的参数。
         •函数执行过程里面没有副作用。（不会对外界产生影响）

  如果不使用纯函数，即直接更改state值会怎么样呢？

  … …      
      case sliderAction.RIGHT_SLIDER:
              if(state.currentIndex == action.length-1){
          state.currentIndex = 0;
                  return state;
              }
  … …

  之后会发现，无论state如何变化，UI都不会更新。以下是Redux的部分源码：

通过查看Redux源码得知，新旧state的比较只是对引用地址的比较，如果reducer只是返回旧state（即previousStateForKey）的更新，新state（nextStateForKey）实际上和旧state引用的都是同一块内存地址，所以无论如何更改，新旧state始终保持相同。这就是为什么reducer必须是纯函数的原因。

• Reducer拆分与合并：
  Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。所以需要先对reducer进行拆分，拆分的原则可以按业务逻辑进行划分，如果是react的话，可以直接和react的组件相对应进行划分。
  划分好之后，可以用Redux提供的combineReducers方法进行合并，十分方便。

  import { combineReducers } from 'redux';
  import photomainReducer from './photomainReducer';
  import sortReducer from './sortReducer';
  import sliderReducer from './photoSliderReducer';
  
  export default combineReducers({
      photomainReducer,
      sortReducer,
      sliderReducer
  });

• Store
  Store 是把Action、Reducer联系到一起的对象。Store 有以下职责：

  1.维持应用的 state；
     2.提供 getState() 方法获取 state；
     3.提供 dispatch(action) 方法更新 state；
     4.通过 subscribe(listener) 注册监听器;
     5.通过 subscribe(listener) 返回的函数注销监听器。

  （1） 创建store
  Redux应用应该只有一个store，他提供了创建store的API—createStore(reducer, initState)。第一个参数为一个reducer，可以接受通过combineReducers合并后的reducer，第二个是可选参数，意思是可以设置应用的初始state。

  const store  = createStore(
          indexPhotomainReducer,
      );
  export default store;

  （2）State
  应用的state也应该只有一个，里面包含了所有的应用数据。当需要获取state的时候，需要使用store.getState()方法。
  （3）store.dispatch(action)
  UI更新state 的唯一途径，通过dispatch方法发起action，唤起对应的reducer更新state。
  （4）store. subscribe(listener)
  通过此方法可以设置监听函数，一旦state发生变化，就会立即调用监听函数（listener）。同时，subscribe的返回值（实际上是一个unsubscribe函数）可以解除监听。如：

  // 每次 state 更新时，打印日志
  // 注意 subscribe() 返回一个函数用来注销监听器
  const unsubscribe = store.subscribe(() =>
      console.log(store.getState())
  )
  
  // 停止监听 state 更新
  unsubscribe();

4.数据流

（1）首先，用户发出 Action（如click事件）。

store.dispatch(SHOW_SLIDER)

（2） Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer根据Action的type调用相应的分支， 返回新的 State 。

let initialState = {hiddenClass: 'g-hidden',currentIndex:0};

let sliderReducer = function (state = initialState, action) {
   switch(action.type){
       case sliderAction.SHOW_SLIDER:
           return {hiddenClass: '',currentIndex:action.index};
       default:
           return state;
   }
    }

（3） State 一旦有变化，Store 就会调用监听函数。

store.subscribe(listener);

（4） listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

以上为Redux的数据流动过程。

本篇到此告一段落，下一篇介绍Redux的异步实现。

参考

Redux 中文文档
Redux 入门教程-阮一峰