Redux的基本使用总结

一、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