基本结构

1.入口配置

import dva from "dva";
// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
app.model(require("./models/example").default);

// 4. Router
app.router(require("./router").default);

// 5. Start
app.start("#root");

src/router.js

import { Router, Route, Switch } from "dva/router";
import IndexPage from "./routes/IndexPage";

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

2.建立业务模型

src/models.js

建立通用model;

const initState = {
    name:'',
    uid:'',
    loading:false
};

export default {
  namespace: "example",

  state:JSON.parse(JSON.stringify(initState)),

  subscriptions: {
    setup({ dispatch, history }) {},
  },

  effects: {
    *fetch({ payload }, { call, put, select }) {
      const modelA = select(({ modelA }) => modelA);

      const state = select(({ example }) => example);

      const { a, b } = yield select();

      yield put({ type: "save" });
    },
  },
  *submit(action, { put, call, select }) {
    const formData = yield select((state) => {
      const buyModel = state.buy;
      const context = state.context;
      const { stock } = buyModel;
      return {
        uuid: context.uuid,
        market: stock && stock.market,
        stockCode: stock && stock.code,
        stockName: stock && stock.name,
        price: String(buyModel.price),
        // 委托数量
        entrustAmount: String(buyModel.count),
        totalBalance: buyModel.totalBalance,
        availableTzbBalance: buyModel.availableTzbBalance,
        availableDepositBalance: buyModel.availableDepositBalance,
      };
    });
    const result = yield call(post, "/h5/ajax/trade/entrust_buy", formData, {
      loading: true,
    });

    if (result.success) {
      toast({
        type: "success",
        content: "委托已受理",
      });
      // 成功之后再获取一次现价，并填入
      // yield put({type: 'fetchQuotation', payload: stock});

      yield put({
        type: "entrustNoChange",
        payload: result.result && result.result.entrustNo,
      });
      // 清空输入框内容
      yield put({ type: "searchQueryChange", value: "" });
    }

    // 403时，需要验证密码再重新提交
    if (!result.success && result.resultCode === 403) {
      yield put({ type: "checkPassword", payload: {} });
      return;
    }

    // 失败之后也需要更新投资宝和保证金金额
    if (result.result) {
      yield put({ type: "balanceChange", payload: result.result });
    }

    // 重新获取最新可撤单列表
    yield put({ type: "fetchRevockList" });

    // 返回的结果里面如果有uuid, 用新的uuid替换
    if (result.uuid) {
      yield put({ type: "context/updateUuid", payload: result.uuid }); //调用其他model中的方法
    }
  },
  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
    merge(state, action) {
      return { ...state, ...action.payload };
    },
    resetAll(state,action){
        return {...initState}
    },
    entrustNoChange(state,action){
        return ···
    }，
    ···
  },
};

3.视图调用

src/routes

import React, { useEffect } from "react";
import { connect } from "dva";
import styles from "./IndexPage.css";
import { Router } from "dva/router";
function IndexPage(props) {
  const dispatch = (type, payload, namespace: "example") => {
    return props.dispatch({
      payload,
      type: `${namespace}/${type}`,
    });
  };
  useEffect(() => {
    dispacth("merge", { name: "qq" });
    dispacth("merge", { name: "qq" }, "addOrder");
  }, []);
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>
          To get started, edit <code>src/index.js</code> and save to reload.
        </li>
        <li>
          <a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">
            Getting Started
          </a>
        </li>
      </ul>
    </div>
  );
}

const selectStateMap = (state) => ({
  example: state.example,
  ...state.content,
});

export default connect(selectStateMap)(Router(IndexPage));