models.effects异步

app.model可以有多个

import dva, { connect } from './dva'
const app = dva();
app.model({
  namespace: 'counter',
  state: { number: 0 },
  // 同步的方法
  reducers: {
    // state是之前的状态，return返回值是新状态 state
    add(state, action) {
      return { number: state.number + (action.payload || 10) }
    },
    minus(state) {
      return { number: state.number - 2 }
    }
  },
})
app.model({
  namespace: 'list',
  state: { number: 0 },
  // 同步的方法
  reducers: {
    // state是之前的状态，return返回值是新状态 state
    add(state, action) {
      // eslint-disable-next-line no-console
      console.log('action123', action)
      return { number: state.number + (action.payload || 10) }
    },
    minus(state) {
      return { number: state.number - 2 }
    }
  },
})
app.model({
  namespace: 'detail',
  state: { number: 0 },
  // 同步的方法
  reducers: {
    // state是之前的状态，return返回值是新状态 state
    add(state, action) {
      // eslint-disable-next-line no-console
      console.log('action123', action)
      return { number: state.number + (action.payload || 10) }
    },
    minus(state) {
      return { number: state.number - 2 }
    }
  },
})

createReducers

createReducers，把 app.model里面的 reducers转成 react-redux中的 reducers函数
app._models = [{namespace: ‘counter’,state, reducers}, {namespace: ‘list’}]
createReducers需要结合 dva.js理解

import { combineReducers, createStore } from 'redux';
function getReducers(app) {
  const rootReducers = {};
  for (const model of app._models) {
    const { namespace, reducers = {}, state : initState = {} } = model;
    rootReducers[namespace] = (state = initState, action) => {
      const reducer = reducers[action.type];
      // 判断函数是否存在，不存在是 undefined
      return reducer ? reducer(state, action) : state;
    };
  }
  return combineReducers(rootReducers);
}

dva.js

import React from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import { createHashHistory } from 'history';
function dva(options={}) {
  const app = {
    model, // 添加模型的方法，方法处理器
    router,
    start,
    _models: [], // 定义所有的模型
    _router: undefined, // 存放路由定定义的函数
  }
  // 把 app.model放到数组里
  function model(model) {
    const prefixModel = prefixNamespace(model);
    app._models.push(prefixModel);
    // app._models.push(model);
  }
  // 路由配置
  function router(routerConfig) {
    app._router = routerConfig
  }
  function start(containerId) {
    const history = options.history || createHashHistory();
    const reducers = createReducers(app); // reducers
    const store = createStore(reducers);
    // application实例，路由传入默认参数
    const App = app._router({ ...app, history })
    ReactDOM.render(
      <Provider store={store}>{ App }</Provider>,
      document.querySelector(containerId)
    )
  }
  return app
}
export { connect }
export default dva
function createReducers(app) {
  const rootReducers = {};
  // app._models = [{namespace: 'counter',state, reducers}, {namespace: 'list'}]
  for(const model of app._models) {
    const { namespace, reducers = {} } = model;
    rootReducers[namespace] = (state = model.state, action) => {
      const reducer = reducers[action.type]
      return reducer ? reducer(state, action) : state;
    }
  }
  return combineReducers(rootReducers);
}
// 此方法就是把 reducers对象的属性从 add 变成 'counter/add'
function prefixNamespace(model, delimit = '/') {
  const { reducers, namespace } = model;
  const keys = Object.keys(reducers);
  window.console.log(23, model)
  // 返回新的 reducers 'counter/add'
  model.reducers = keys.reduce((memo, key) => {
    const reducerKey = `${namespace}${delimit}${key}`;
    memo[reducerKey] = reducers[key];
    return memo;
  }, {});
  return model;
}