在Taro 3 React工程使用DVA
在Taro3 React版本的工程中使用Dva，大体上跟Taro 2的版本差不多，只是有一些依赖和引用不一样。
操作步骤
-
使用taro创建脚手架工程，最好选默认，选redux的话还需要修改；
-
安装DVA相关依赖：
npm i redux react-redux redux-logger redux-thunk dva-core dva-loading
不需要安装@tarojs/redux和@tarojs/redux-h5
- 安装其他依赖：
npm i
- 在
src/app.tsx同级增加dva.ts：
import Taro from '@tarojs/taro'
import { create } from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'
let app, store, dispatch, registered
function createApp(options?: any) {
const { models } = options
// if (process.env.NODE_ENV === 'development') {
// options.onAction = [createLogger()]
// }
app = create({
...options
})
app.use(createLoading({}))
// 适配支付宝小程序
if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
global = {};
}
if (!global.registered) models.forEach((model) => app.model(model))
global.registered = true
app.start()
store = app._store
app.getStore = () => store
dispatch = store.dispatch
app.dispatch = dispatch
global.store = store
return app
}
export default {
createApp,
getDispatch() {
return app.dispatch
}
}
- 在
src/pages/index目录下，创建model.ts：
export interface HomeModelState {
}
const HomeModel = {
namespace: 'home',
state: {
},
effects: {
},
reducers: {
save(state, { payload }) {
return {
...state,
...payload,
}
}
},
}
export default HomeModel
- 在
src目录下建立models目录，并创建index.ts：
import home from '../pages/index/model'
export default [
home,
]
建议在src/models下放公用的model文件，其他分别放在页面目录，并在这个入口文件index.ts里导入进来。
- 修改
src目录下的app.tsx：
import { Provider } from 'react-redux'
import dva from './dva'
import models from './models/index'
const dvaApp = dva.createApp({
initialState: {},
models: models
});
const store = dvaApp.getStore();
上面是要增加的代码；
...
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
...
如上，就在render里的<Index />外包裹Provider就好。
自此，Taro 3的react工程引入Dva完成。
本文适用于Taro 3.x.x，亲测没问题。
Taro3与2安装Dva的区别
- Taro 3不需要安装
@tarojs/redux和@tarojs/redux-h5； - Taro 3要从
react-redux里引入Provider；
import { Provider } from 'react-redux'
