redux

redux 图解

redux-saga 图解

dva 图解

// dva 模板
import { Reducer, Effect, Subscription } from 'umi';
interface ModelType {
  namespace: 'somename';
  state: {};
  reducers: {
    someReducerFn: Reducer;
  };
  effects: {
    effectFn: Effect;
  };
  subscriptions: {
    setup: Subscription;
  };
}
const someModel: ModelType = {
  namespace: 'somename',
  state: {},
  reducers: {
    someReducerFn(state, action) {
      // action = { type, payload }
      // 对 state 进行处理后返回 newState
      // return newState
    },
  },
  effects: {
    *effectFn(action, effects) {
      // effects = { put, call }
      // put 执行 reducers 中的方法
      // call 执行 srevice 请求
      // 没有返回值
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      // dispatch(action)
      // 可以执行 effects / reducers 中的方法
      return history.listen(location => {
        if (location.pathname === 'someurl') {
          dispatch({
            type: 'someReducerFn',
          });
        }
      });
    },
  },
};
export default someModel;