redux介绍

一篇写给新手的redux食谱，老玩家可选择性绕道。

1、认识redux

“Redux 是 JavaScript 状态容器，提供可预测化的状态管理”。

这是redux官方最普遍的一种介绍，其中“状态”这个词出现了两次，这足以让我们意识到redux的工作重心 —— 储存状态，管理状态。在MVC（即model+view+controller）模式中，redux担任了model层和controller层（在此我默认大家熟悉至少一个类似于react或者vue的view层框架），负责保存页面数据状态，以及通过controller层逻辑实时更新页面。

由于redux并不是一个独立使用的库，它一般需要一个view层的库搭配使用，因此以下的讲解我将以react+redux的经典组合作为介绍。需要强调的是，redux并不绑定任何view层框架，因此，react不是唯一的搭配。

2、redux的核心概念

state

• 在react中，state是一个普通对象，它是页面元素数据的映射，我们改变state的时候，会触发react相关机制去间接地更新页面。
• 在redux中，state同样是一个普通对象，应用中所有的state以一棵对象树的形式存在于唯一定义的store中，这是redux存储状态的场所。

action

• action是一个普通对象，它描述了如何修改state，修改state的唯一途径是触发action。action的结构没有硬性限制，但建议服从FSA规范：
  //FSA（flux standard action）标准
  let action = {
  type: 'toSetNumber', //必需，可以看作action的标识
  payload: 15， //可选，存放需要action携带的数据
  meta: '设置数量' //可选，描述action含义
  }
  当然，偷懒是人类的天性。如果每个action都要这样，我相信你也会很烦，因此我们可以使用actionCreator来简单创建一个action：
  let actionCreator = id => {
  type: 'toSetNumber',
  payload: id，
  }

• 正常来说，用户与页面交互时会发起一个action，发起的动作由store提供的dispatch方法执行：
  <button onClick={ () => store.dispatch(action) }>设置数量</button>
  在中间件（Middleware）thunk的支持下，dispatch方法允许传入一个函数，调用时执行这个函数，并最终发射一个普通action：
  javascript let action = (getState, dispatch) => { // 在这里你可以做你需要的一些逻辑操作， // 最后发射一个普通action }

    ``` html
    <button onClick={ () => store.dispatch(action) }></button>
    ```
  

除thunk之外，其他的中间件（logger，promise）还可以进行日志记录、调用异步接口等等。

reducer

• reducer是action的处理器，action只是通知了reducer有动作发出，真正修改state的是reducer。reducer是一个普通函数，它根据传入的action和旧的state，按既定的逻辑产生并返回新的state：
  let reducer = (state=initState, action) => {
  switch(action.type){
  case 'toSetNumber':
  return Object.assign({}, state, {
  number: action.payload
  });
  // reducer要求返回一个新的对象，而非修改原对象，
  // 因此这里使用了Object的assign方法，
  // 将传入的对象进行并集合并，
  // 对于共有的属性，遵循参数列表后边覆盖前边的规则

            case 'toUpdateList':
                ...
  
            default:
                return state;
        }
    }
  

• reducer允许拆分出子reducer，以方便分块管理state。当store初始化时，子reducer通过combineReducer方法聚合成一棵与state树结构相一致的reducer树；

3、最后说点啥

redux遵循的数据状态流，使得项目拥有极强的生产力和适应性。笔者最欣赏的还是react+redux的组合，其生态圈目前比较成熟，各项资源的文档比较完整，建议大家熟读redux的文档
redux官方文档__中文版入口
redux官方文档__英文版自虐患者入口

本文重在讲述redux的一些核心概念和工作模式，而要会使用，最好的方法还是研究实例代码，这里推荐参考
实例讲解基于 React+Redux 的前端开发流程