Redux介绍及基本应用

一、Redux介绍 

　　Redux的设计思想很简单，就两句话：

1. Web应用是一个状态机，神力与状态是一一对应的
2. 所有的状态，保存在一个对象里面　　

二、Redux基本概念和API

•  Store

　　　　Store就是保存数据(state)的地方，整个应用只能有一个Store。Redux通过createStore来生成store。

• State

　　　　Store对象包含所有State，某一时刻的数据集合就是State，可以用过store.getState()获取。

　　　　Redux规定：一个state对应一个View,只要State相同，View就相同。

• Action

　　　　State变化，会导致View变化，用户通过动作会触发Action,告知State应该要发生变化了（State只能由Action改变）。

const action={
   type:'Exp1',
   otherParam:'1'      
};

　　上面代码中，Action的名称是Exp1,携带的信息是1。

　　View发送Action的方法是store.dispatch(action)

　　Store收到Action后，需要能过Reducer更新Store里的State,Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State

　　整个流程图如下图：

　　

• 纯函数

　　　　所谓的纯函数是指同样的输入，必定得到同样的输出，Reducer函数就是纯函数，纯函数有以下约束：

1. 1. 不得改写参数
   2. 不能调用系统I/O的API
   3. 不能调用Date.now()或者Math.random()等不纯的方法，因为每次都会得到不一样的结果　　

　　　　由于Reducer是纯函数，就可以保证同样的State必定得到同样的View。但也正因为这一点，Reducer函数里面不能改变State，必须返回一个全新的对象，请参考下面的写法

　　　　　　

// State 是一个对象
function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一个数组
function reducer(state, action) {
  return [...state, newItem];
}

• store.subscribe()

　　　　此方法用于监听State状态，一但State发生变化，就自动执行些函数　　　　　　　　

import { createStore } from 'redux';
const store = createStore(reducer);

store.subscribe(listener);

　　　　store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

三、Reducer的拆分

　　Reducer负责生成State,由于整个应用只有一个State对象，包含所有数据，这可能会造成Reducer函数非常庞大。请看下面例子

　　

const reducer=(state,action)=>{
   const{type,otherParam}=action;
   switch(type){
     case 1:
           return Object.assign({},state,{
                 chatLog:state.chatLog.concat(otherParam)
               });
     case 2:
           return Object.assign({},state,{
                 statusMessage:otherParam
             });
      .........
    }   
}    

     拆分：

const reducer={state,action}=>{
   return{
      chatLog:chatLog(state.chatLog,action),
      statusMessage:statusMessage(state,statusMessage,action),
      ...............
   }

}

 拆分后需要通过方法combineReducers进行合并:

reducer=combineReducers({
  chatLog,
  statusMessage,
  userName
})