react + umi + dva

umi

dva

• namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
• state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
• reducers: Action 处理器，处理同步动作，用来算出最新的 State
• effects：Action 处理器，处理异步动作

src/models/example.js

// 在 models 中跳转路由
import { routerRedux } from "dva/router";

function setName(name) {
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve(name ? name : "aa");
    }, 1000);
  });
}

export default {
  namespace: "example",

  state: {
    name: "",
    list: [],
  },


  effects: {
    *fetch({ payload }, { call, put }) {
      // payload： dispatch中payload值(参数)
      console.log("effectspayload", payload); // {name:'zs'}

      // 异步 setName 模拟异步操作 注意：第二个参数是传递的参数
      const res = yield call(setName, payload.name);
      console.log("res", res); // ls

      // 调用 reducers   type：方法名 payload：参数
      yield put({ type: "save", payload: res });

	 // 跳转路由
	  yield put(routerRedux.push("/home"));
    },
  },

  reducers: {
    // state： state的全部数据{name:'',list:[]}  payload: effects中 put 方法中 payload 参数
    save(state, { payload }) {
      console.log("reducers state", state);
      console.log("reducers payload", payload); // ls
      return { ...state, name: payload };
    },
  },
};

src/components/Example.js

import React from "react";
import { connect } from "dva";

const Example = (props) => {
  console.log("props", props);
  function handleClick() {
    console.log("handleClick");
    props.dispatch({
      type: "example/fetch", // 命名空间下的 effects
      payload: { name: "zs" }, // 参数
    });
  }
  return <div onClick={handleClick}>Example</div>;
};

Example.propTypes = {};

// 第一个参数{ example, user } 命名空间的名字 返回值{ User: user, Example: example, }
export default connect(({ example, user }) => ({
  User: user,
  Example: example,
}))(Example);

src/views/IndexPage.js

import React from "react";
import Example from "../components/Example";

export default function IndexPage() {
  return (
    <div>
      <Example />
      <h1>Yay! Welcome to dva!</h1>
    </div>
  );
}