介绍
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)
