代码: https://github.com/JanYLee/recruit-app/tree/demo/basic-redux

专注于状态管理

  • 用于状态管理, 和react解耦, 其他框架也可以使用
  • 单一状态, 单向数据流
  • 核心: store, state, action, reducer

主要流程:

  • 通过reducer来创建store, 保存所有状态, 记录state, 通过store.getState获取状态
  • 需要更改store时, 从组件里派发(dispatch)出一个行为(action), store.dispatch(action);
  • action和state由处理函数(reducer)拿到, 生成新的state, store.subscribe监听每次修改, 更新store

初始化store:

  1. import { createStore } from 'redux';
  3. // 1 新建store
  4. // 通过reducer生成
  5. // 根据老的state和action 生成新的state
  6. function counter (state=0, action) {
  7.   switch(action.type) {
  8.     case 'add':
  9.       return state+1;
  10.     case 'delete':
  11.       return state-1;
  12.     default:
  13.       return 10;
  14.   }
  15. }
  17. // 新建store
  18. const store = createStore(counter);
  20. const init = store.getState();
  21. console.log('init :', init); // init : 10

开始派发action和监听(subscribe)store变化:

  1. function listener() {
  2.   const curStore = store.getState();
  3.   console.log(`now store is ${curStore}`);
  4. }
  6. // 监听每次修改store
  7. store.subscribe(listener);
  9. // 派发事件 传递action
  10. store.dispatch({type: 'add'}); // now store is 11
  11. store.dispatch({type: 'add'}); // now store is 12
  12. store.dispatch({type: 'delete'}); // now store is 11