Dva In Mobile

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 => () => {container};
    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();
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 (
            {data}
        )
    }
}

通过react-redux的connect方法（dva是基于react-redux封装的）将一个组件注册到dva中，connect方法会将model的数据注入到组件props中,dva可通过修改组件的props改变组件的状态。

componentDidMount(){
        this.props.dispatch({type:'example/update',payload:{data:'hello dva'}})
}

这里的代码演示了通过发送action获取数据修改组件状态，通常在做网络请求时会在这儿位置获取数据。