介绍

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

数据流向

用户需要改变数据的时候，需要通过dispatch发起一个action，同步操作会直接通过Reducers改变State,如果是异步操作会先触发Effects然后流向Reducers最终改变State。

特点

• dva进行了模块的划分，有了命名空间
• 每一个模块都有完整的结构，state、reducer、effect
• effect是处理异步的部分，底层使用redux-sagas做异步流程的控制
• 数据的修改都需要通过reducer

dva-core的使用

安装

npm install dva-core

dva-core的配置

// dva.js dva-core配置文件
import { create } from "dva-core";
// 数据模块的集合，返回的是数组
import models from "@/models";

// 编写创建函数
function createApp(opts) {
    let app = create(opts);
    // 注册model，必须每个都需要注册
    models.forEach(model => {
        app.model(model);
    })
    // 启动应用,必须在model注册完成后，在store获取之前
    app.start();
    // 获取store
    const store = app._store;
    app.getStore = () => store;
    app.dispatch = store.dispatch;
    return app;
}

const dva = createApp({});
export default dva.getStore();

将store注入到项目中

• 将store注入到项目中，需要使用react-redux插件进行注入

// 入口文件
import React from 'react'
import {Provider} from 'react-redux'
import App from './app'

// 引入dva的配置文件，获取store
import store from './dva.js'

const Index = () => {
    return (
        <Provider store={store}>
            <App/>
        </Provider>
    )
}

在组件中的使用

• 使用react-redux中的connect，将store放入组件中

import React from 'react'
import {connect} from 'react-redux'

const Home = props => {
    const {login} = props;
    
    return <h1>{login.name}</h1>
}

export default connect(store => ({
    login: store.login // 把登录模块的store注入项目中
}))(Home)