Dva是什么？
其官方github上有详细说明，这里不再赘述，贴一下其github地址：Dva中文简介
使用方式
- dva在react-native的使用方式和react开发是一样的，只是在配置方面稍有不同，下面详细介绍其在react-native中的配置和基本使用。
安装依赖
使用命令react-native init HelloDva创建一个react-native项目，进入该项目根目录cd HelloDva，下载dva的依赖npm install dva-core，注意这里下载的依赖模块是dva-core，此模块是dva为适应react-native单独从dva中抽取出来的。
配置dva
单独封装一个配置的方法，下面是具体的代码
import React from 'react'
import {create} from 'dva-core'
import {Provider} from 'react-redux'
export default function (options) {
const app = create(options);
if (!global.registered) options.models.forEach(model => app.model(model));
global.registered = true;
app.start();
// eslint-disable-next-line no-underscore-dangle
const store = app._store;
app.start = container => () => <Provider store={store}>{container}</Provider>;
app.getStore = () => store;
return app
}
首先使用dva-core提供的create方法创建一个dva app，通过传入的配置参数向app注册所需的model,然后调用app.start()初始化app,接下来关键一步重写start方法返回一个使用Provider包裹的组件并传入app._store，这是向组件注入数据的关键。
具体的使用方式
import React from "react";
import dva from './utils/Dva';
import Router from './Router';
import { AppRegistry } from 'react-native';
//定义dva的参数
const options = {
initialState: {},
//注册的models
models: [],
//注册的事件
onAction: [],
//异常处理，所有的异常都会通过这里
onError(e) {
console.log("Error", e);
}
};
const app = dva(options);
const App = app.start(<Router/>);
AppRegistry.registerComponent('HelloDva', () => App);
引入前面定义的配置方法获取到dva app，然后调用重写的start方法拿到配置好的组件（这里的Router是自定义的一个路由组件）。
这里的配置参数主要关注models，其他参数可查看Dva中文简介，models是各个model的集合，这里model的概念是dva数据的提供来源，存放的是全局的数据（本地产生的或者网络获取的），dva会将每个model注册到自己的model容器中，在通过dispatch一个action后将调用指定model的方法执行。
添加一个model
import {createAction} from "../utils";
export default ExampleModel ={
namespace:'example',
state:{
data:null,
},
reducers:{
updateState(state, { payload }) {
return { ...state, ...payload }
},
},
effects:{
*update({payload},{call,put}){
yield put(createAction('updateState')({data:'example'}))
}
}
}
一个model主要由四个部分组成namespace,state,reducers,effects，还有其他的一些配置可在Dva中文简介中找到。
namespace: 命名空间，标识了该model的唯一性。
state: model存放的数据，全局可访问的。
reducers: 更新的state的方法，这里的方法全部都为纯函数，并且是同步的。
effects: 异步的方法，用于执行耗时操作，需要通过reducers来更新数据。
action: 上面的代码中yield put(createAction('updateState')({data:'example'}))这行代码创建了一个action并通过put方法发送了一个action，其结构是这样的{type:'example/updateState',payload:{data:'example'}}
注册一个组件
import React, {Component} from 'react'
import {connect} from "react-redux";
@connect(({example}) => ({...example}))
class Example extends Component {
componentDidMount(){
this.props.dispatch({type:'example/update',payload:{data:'hello dva'}})
}
render() {
const {data} = this.props;
return (
<Text>{data}</Text>
)
}
}
通过react-redux的connect方法（dva是基于react-redux封装的）将一个组件注册到dva中，connect方法会将model的数据注入到组件props中,dva可通过修改组件的props改变组件的状态。
componentDidMount(){
this.props.dispatch({type:'example/update',payload:{data:'hello dva'}})
}
这里的代码演示了通过发送action获取数据修改组件状态，通常在做网络请求时会在这儿位置获取数据。
