增加dva models

配置使用dva

在umi@2中要使用dva的功能很简单，只要使用 umi-plugin-react 插件并配置 dva:true 即可。 我们使用create-umi初始化项目的时候，选中了antd和dva功能，在《使用CLI创建初始化项目》这一小节里面。 如果你在创建的时候，没有选中dva功能，或者不确定自己是否选中，你可以打开umi的配置文件。

./umirc.js

// ref: https://umijs.org/config/
export default {
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: false,
      title: 'hero',
      dll: false,
      routes: {
        exclude: [],
      },
      hardSource: false,
    }],
  ],
}

确认配置表里， dva:true 。

新增model文件

我们知道umi在使用dva功能时，约定了 ./src/models/ 目录下的js文件，都会被视为全局model，被自动引用，并且可以在任何页面中使用。所以我们在该目录下面新建hero.js 为了防止输入错误，还有简化记忆，我们依旧使用cli来创建model

$ umi g dva:model hero

./src/models/hero.js

export default {
  state: 'hero',
  subscriptions: {
    setup({ dispatch, history }) {
    },
  },
  reducers: {
    update(state) {
      return `${state}_hero`;
    },
  },
  effects: {
    *fetch({ type, payload }, { put, call, select }) {
    },
  },
}

关于这个文件的详细说明，可以查看导读的《五分钟掌握最小知识体系》 这里需要说明的是，umi约定了如果model中不存在 namespace 将会使用文件名当作该model的namespace。为了不出现错误，应该保持所有的model文件（不管是全局model还是页面model）文件名不同。

在页面中使用model

在这里我们需要引入dva的connet将页面和model绑定在一起，我们稍微改造一下页面的结构。

./src/pages/hero.js

import styles from './hero.css';
import { connect } from 'dva';  ---step1
function Hero(props) {          ---step2
  console.log(props.hero);       ---step4
  return (
    <div className={styles.normal}>
      <h1>Page hero</h1>
      <h2>This is {props.hero}</h2>
    </div>
  );
}
export default connect(({ hero }) => ({ hero }))(Hero);  --- step3

• step1 在文件头部引入了dva的connect
• step2 把之前的匿名函数，改成实名函数Hero
• step3 使用connect连接了页面和models
• step4 从属性中取出namespace为hero的model的state数据。

  这里有一点点绕口，比如我们现在定义的是

  state: 'hero',
  console.log(props.hero); 
  hero

  如果定义的是一个对象

  state: {
      text: 'page work',
      list: []
  },
  console.log(props.hero);
  {
   text: 'page work',
   list: []
  }

  编辑完保存，启动umi开发服务器。

同样的方法新建 ./src/models/item.js和 ./src/models/summoner.js 并同步修改 ./src/pages/item.js和./src/pages/summoner.js

最终效果

最终我们的目录结构

.
├── app.js
├── assets
│   └── yay.jpg
├── global.css
├── layouts
│   ├── index.css
│   └── index.js
├── models
│   ├── hero.js
│   ├── item.js
│   └── summoner.js
└── pages
    ├── hero.css
    ├── hero.js
    ├── index.css
    ├── index.js
    ├── item.css
    ├── item.js
    ├── summoner.css
    └── summoner.js

代码回顾：这节课的全部代码