redux笔记

****************************************************************************************************************


redux笔记


1、 Redux知识点
a、设计思想：
1 web应用是一个状态集合，视图跟状态是一一对应的。 
2 所有的状态都保存在一个对象里面。
2、 Store 
a、保存数据的地方，整个应用只能有一个store.
b、Redux提供createStore函数生成store对象。
3、 state
a、Store对象包含所有的数据，如果想得到某个时点的数据，就要对Store生成快照，这种时点的数据集合就是 state. 通过方法store.getState()拿到。
【eg】
import { createStore } from 'redux';  //引入redux
const store = createStore(fn); //生成store对象
const state = store.getState();  //获取当前state状态
4、 action
a、 State变化，导致view变化，但是用户是接触不到state，意思是说开发人员不能直接操作state对象来控制view层的变化。因此state的变化必须是view变化导致的。Action就是 view层发送的通知。告知store state要发生变化了。
b、 action是一个对象，其中type属性是必须的，表示action的名称。其他属性可以自由配制。
5、 Reducer
a、 Store收到Action以后，必须给出一个新的state，这样view才会发生变化。这种State的计算过程就是reducer。
b、 reducer是一个函数，接受Action和当前的state作为参数，返回一个新的state状态。
【eg】
const defaultState = 0; 
const reducer = (state = defaultState, action) => { 
switch (action.type) { 
case 'ADD': 
return state + action.payload; 
default: 
return state; 
} 
}; 
const state = reducer(1, { type: 'ADD', payload: 2 }); 
c、 实际的调用过程中Reducer函数不是手动调用的，是在创建store的时候传入的
【eg】
import { createStore } from 'redux'; 
const store = createStore(reducer); 
5、 着重讲解store api的一些方法。
store.dispatch()
a、是View发出的Action的唯一方法。
【eg】
import { createStore } from 'redux'; 
const store = createStore(fn); 
store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' }); 
store.subscribe()
a、监听state发生变化，state发生变化就自动执行这个函数。
b、store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
【eg】
let unsubscribe = store.subscribe(() => console.log(store.getState()) ); 
unsubscribe(); 
6、 Reducer的拆分
a、reducer函数负责生成state对于大型项目来说，会非常巨大，所以需要拆分
【eg】
  const chatReducer = (state = defaultState, action = {}) => {
  const { type, payload } = action;
  switch (type) {
case ADD_CHAT:
  return Object.assign({}, state, {
chatLog: state.chatLog.concat(payload)
  });
case CHANGE_STATUS:
  return Object.assign({}, state, {
statusMessage: payload
  });
case CHANGE_USERNAME:
  return Object.assign({}, state, {
userName: payload
  });
default: return state;
  }
};
b、redux提供了一个combineReducers方法，用户reducer拆分。该方法会将几个部分的属性合并成一个大的函数。前提是State属性名必须跟reducer同名。
【eg】
import { combineReducers } from 'redux'
import * as reducers from './reducers'
const reducer = combineReducers(reducers)
******************************************************************************************************************************************