REDUX 怎么用

redux存在的意义：作为一个web应用的状态管理方法，状态与视图一一对应，所有的状态都放在store里。

1.store

store是保存数据的地方，一个应用只能有一个store。

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

2.state

state是store在某一个时刻的快照，一个state对应一个view视图

import { createStore } from 'redux';
const store = createStore(fn);
store.getState()

3.ACTION

action是一个对象，他是改变state的唯一方法，dispatch一个action就会改变store中state的值

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

4.actionCreator action生成函数

function changeTime(time){
	return {
		type：'CHANGE',
		payload:time
	}
}

5.dispatch

dispatch 是view发出action的唯一方式，dispatch一个action，就意味着将action对象发送到store中去。

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

6.reducer

store接收到action之后，通过reducer来改变state，它接收当前state和action，并计算返回新的state。
reducer函数不用手动执行，每次store.dispatch都会自动触发reducer方法的执行。所以需要将reducer方法传入到createStore方法当中，让store知晓。

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

7store.subscribe()

store.subscribe()设置监听函数，每当state发生变化时，将render函数或者setState函数放在监听函数当中，state发生变化时，就会出发页面更新。

8.store的实现

下面是createStore的一种简单的实现方法：

const createStore = (reducer) => {
  let state;
  let listeners = [];
  //获取state
  const getState = () => state;
  //自动执行reducer函数改变state  调用监听函数监听state的变化触发页面更新
  const dispatch = (action) => {
    state = reducer(state, action);
    // state变化时通知所有的订阅者
    listeners.forEach(listener => listener());
  };
  //将所有订阅state的函数放在一起
  const subscribe = (listener) => {
  	
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

dispatch({});

return { getState, dispatch, subscribe };
};

9.Reducer的拆分

由于在应用中只能有一个state，在大型应用中，state必然很庞大，导致reducer函数也很庞大，redux提供一个combineReducer函数，用于reducer的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

export default todoApp;

10 redux工作流程

1.首先，用户发出一个action，想改变redux里面的数据
2.store自动调用reducer函数，传入当前state和action，reducer传回新的state
3.state发生变化时，通知所有的订阅函数，执行相应的setState函数，更新视图