最近公司使用的是 Taro + dva 开发的一个h5的项目，在原有项目中开发一段时间后自己也有了搭建一个项目框架的兴趣。
下面就介绍一下我在一个新的 Taro 项目中集成 dva 的过程：
步骤一：配置电脑环境
1、安装node.js
2、安装 taro-cli
npm install -g @tarojs/cli
安装详情见官网不做赘述
步骤二、初始化taro项目
使用命令 $ taro init myApp 初始化项目
注意：如图2-1所示建议使用 TypeScript
步骤三、安装redux、 react-redux 等依赖包
npm install --save react-redux
npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
步骤四、安装dva
npm install --save dva-core dva-loading
dva-core：封装了 redux 和 redux-saga 的一个插件
dva-loading：管理页面的 loading 状态
步骤五、在项目中配置dva
1、在项目src目录下创建utilities文件夹，并在utilities中创建dva.ts文件
dva.ts文件中的内容如下：
import { create } from "dva-core";
import { createLogger } from "redux-logger";
import createLoading from "dva-loading";
let app: any;
let store: any;
let dispatch: any;
let registered: any;
function createApp(opt) {
// redux日志
opt.onAction = []
if (opt.enableLog) {
opt.onAction.push(createLogger())
}
app = create(opt)
app.use(createLoading())
// 注入model
if (!registered) {
opt.models.forEach(model => app.model(model));
}
registered = true;
app.start()
// 设置store
store = app._store;
app.getStore = () => store;
app.use({
onError(err: any) {
console.log(err);
}
})
// 设置dispatch
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch() {
return app.dispatch
}
};
2、在src/page/index目录下创建mode.ts文件（后期开发项目是每一个页面组件都需要含有一个mode.ts文件用来做当前页面的异步数据请求和数据流管理 -- 原理见dva官方文档）
文件内容如下：
export default {
namespace: 'index',
state: {
},
effects: {
},
reducers: {
}
}
3、在src目录下创建models文件夹，并在modes文件夹下创建index.ts（该文件的作用是用来注册当前项目中所有页面组件的mode的）
页面内容如下（就是将第2小步中src/page/index目录下创建mode.ts文件引入到该文件）：
import index from '../pages/index/model'
export default [index]
4、对src/app.ts文件重命名为src/app.tsx并修改其中内容如下：
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import dva from './utilities/dva';
import models from './models';
import './app.scss'
const dvaApp = dva.createApp({
initialState: {},
models,
});
const store = dvaApp.getStore();
class App extends Component {
componentDidMount() { }
componentDidShow() { }
componentDidHide() { }
componentDidCatchError() { }
// this.props.children 是将要会渲染的页面
render() {
return (
{this.props.children}
)
}
}
export default App
注意：需要注意的是在网上也有很多在taro中集成dva的帖子，但那些帖子大多都是taro1.x或taro2.x集成dva，而在taro3.x的今天那些网上的其他文章会存在一个隐藏bug，本篇文章与网上其他文章基本一致，但修改了这个bug，本篇文章与其他文章不同的一点是：
在app.tsx文件中 网络上其他文章： import{Provider}from"@tarojs/redux"
在app.tsx文件中 本篇文章：import { Provider } from 'react-redux' (点击查看参考项目)
步骤六、在项目中使用dva（测试dva是否成功引入项目）
1、在步骤五中的第2小步中我们为src/page/index文件夹中创建了一个mode.ts文件，现在修改这个文件
2、将src/page/index/mode.ts文件连接到src/page/index/index.tsx文件中
3、通过命令 npm run dev:h5 启动项目打开console控制台查看打印情况
参考网址：
dva官方文档：https://dvajs.com/guide/introduce-class.html
taro官方文档：https://taro-docs.jd.com/taro/docs/README
参考项目：https://github.com/kala888/nice-router-taro
https://www.jianshu.com/p/697ff84b7d49
https://www.jianshu.com/p/71e209987c83