Dva封装

Dva

import React from "react";
import ReactDOM from "react-dom";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider, connect } from "react-redux";
import createSagaMiddleware from "redux-saga";
import * as effects from "redux-saga/effects";
import { createHashHistory } from "history";
const NAMESPACE_SEPERATOR = "/";
export { connect };
export default function () {
  let app = {
    model,
    _models: [],
    router,
    _router: null,
    start,
  };
  function model(model) {
    app._models.push(model); //把传入的model存放起来
  }
  function router(routeConfig) {
    app._router = routeConfig; //把路由的配置暂存起来
  }
  function start(root) {
    //启动渲染
    let reducers = {};
    for (let model of app._models) {
      reducers[model.namespace] = function (state = model.state, action) {
        let actionType = action.type; //获取动作类型 counter/add  ['counter','add']
        let values = actionType.split(NAMESPACE_SEPERATOR);
        if (values[0] == model.namespace) {
          //如果说命名空间的名字和动作命名空间一样的话
          let reducer = model.reducers[values[1]]; //获取要进行计算状态的reducer
          if (reducer) return reducer(state, action);
        }
        return state;
      };
    }
    let reducer = combineReducers(reducers); //合并reducers
    let sagaMiddleware = createSagaMiddleware();
    function* rootSaga() {
      for (const model of app._models) {
        for (const key in model.effects) {
          yield effects.takeEvery(`${model.namespace}${NAMESPACE_SEPERATOR}${key}`, model.effects[key], effects);
        }
      }
    }
    let store = createStore(reducer, applyMiddleware(sagaMiddleware)); //创建仓库
    sagaMiddleware.run(rootSaga);
    const history = createHashHistory();
    let App = app._router({ app, history }); //获取要渲染的组件
    ReactDOM.render(
      //执行渲染
      <Provider store={store}>{App}</Provider>,
      document.querySelector(root)
    );
  }
  return app;
}

简单使用

import { adminCharacters, adminCharactersDelete } from "src/api/admin";

export default {
  namespace: "roleAdmin",
  state: {
    dataSource: [],
  },
  effects: {
    *fetchData({ id }, { call, put, select }) {
      const { data } = yield call(adminCharacters);
      yield put({
        type: "save",
        payload: {
          dataSource: data,
        },
      });
    },
    *deleteData({ id, cb }, { call, put }) {
      const { success } = yield call(adminCharactersDelete, id);
      if (success) {
        cb();
      }
    },
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },
  },
};