DVAJS(二)使用

• 安装dva-cli

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

• 创建新应用

$ dva new dva-quickstart

• 执行

$ npm start

• 项目主要目录介绍

----------------------------src
      |____index //用来创建dva和注册dva的
      |____router // 路由文件
      |____models //保存model文件

• 路由文件介绍
  路由文件主要是用来配置路由的（大部分静态路由都是这里声明的）

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import User from "./routes/user"
import {UserDynamic} from "./dynamic/index"
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/user" component={UserDynamic}/>
      </Switch>
    </Router>
  );
}

export default RouterConfig;

• mode结构介绍

export default {

  namespace: 'example', //命名必须唯一

  state: { //声明state
    currentState:0
  },

  subscriptions: {
//注册model的时候使用
    setup({ dispatch, history }) {  // eslint-disable-line
      console.log("注册数据");
    },
  },

  effects: {
    //副作用函数，数据同步异步请求在这里进行
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
  //
      yield put({ type: 'save' ,action:payload});
    },
  },

  reducers: {
  //reducers 集中处理数据
    save(state, action) {
     const {action:{type}} =action 
     if (type =="add"){
       state.currentState +=1
       return {...state}
     }
      return { ...state, ...action.payload };
    },
  },

};

-使用组件使用dva

import React from 'react';
import { connect } from 'dva';
import {addAction} from "../action/exampleAction"
function IndexPage(props) {
  const{state,add} = props
  return (
    <div>
        <h2>dva 计算</h2>
        <p>当前值:{state}</p>
        <button onClick={e=>add()}>增加</button>
    </div>
  );
}
IndexPage.propTypes = {
};

export default connect(({example})=>({state:example.currentState}),{add:addAction})(IndexPage);
//使用connect进行组件的高级封装。connect需要mapstate,和mapdispatch

• dynamic 按需导入model
  如果一次全部注册mode,需要发费大量的时间和性能，所以在使用到组件的时候，早注册

import dynamic from 'dva/dynamic';
import {app} from "../index"
export const UserDynamic = dynamic({
    app,
    models:()=>[import("../models/user"),],
    component:() =>import("../routes/user")
})

然后在路由文件修改为

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import User from "./routes/user"
import {UserDynamic} from "./dynamic/index"
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/user" component={UserDynamic}/> //使用动态组件
      </Switch>
    </Router>
  );
}