一、Redux的过程
1.使用函数 createStore 创建 store 数据点
2.创建 Reducer。它要改变的组件，它获取 state 和 action，生成新的 state
3.用 subscribe 监听每次修改情况
4.dispatch 执行，reducer(currentState,action) 处理当前 dispatch 后的传入的 action.type 并返回给 currentState 处理后的 state，通过 currentListeners.forEach(v=>v()) 执行监听函数，并最后返回当前 action 状态。
export function createStore(reducer) {
let currentState = {};
let currentListeners = [];
// 读取 store tree中所有state
function getState() {
return currentState
}
// 注册 listener，监听 state 变化
function subscribe(listener) {
// 传入函数
currentListeners.push(listener)
}
// 分发 action
function dispatch(action){
currentState = reducer(currentState,action)
currentListeners.forEach(v=>v())
return action
}
// 触发初始状态
dispatch({type:'@TYRMARS/Mars-Redux'})
return {getState,subscribe,dispatch}
}
二、如何使用之 Redux 如何管理 state
注册 store tree
1.Redux 通过全局唯一的 store 对象管理项目中的 state
const store = createStore(
reducer, /* preloadedState, */
// window.__REDUX_DEVTOOLS_EXTENSION__&&window.__REDUX_DEVTOOLS_EXTENSION__()
// 使用 chrome 的 redux-devtools 插件需要加这句话
);
2.可以通过 store 注册 listener，注册的 listener 会在 store tree 每次变更后执行
constructor(props) {
super(props);
......
this.storeChange = this.storeChange.bind(this);
store.subscribe(this.storeChange);
}
......
storeChange() {
this.setState(store.getState())
}
如何更新 store tree
1.store 调用 dispatch，通过 action 把变更的信息传递给 reducer
const action = { type: 'changeInput' , value: e.target.value };
store.dispatch(action);
2.store 根据 action 携带 type 在 reducer 中查询变更具体要执行的方法，执行后返回新的 state
export default (state = defaultState, action) => {
// Reducer 里面只能接受 state，不能改变state
if (action.type === 'changeInput'){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
// 返回给 store仓库
return newState;
}
return state;
}
3.reducer 执行后返回的新状态会更新到 store tree 中，触发由 store.subscribe() 注册的所有listener
