Taro 3.0 使用 dva

Feb 09, 2023 ·

2 Min Read

第一步，安装依赖

npm install --save dva-core dva-loading
npm install --save redux react-redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

第二步，创建 dva.js 文件

至于你放哪里这看个人喜欢，我本人喜欢放在 src 根目录下。

import Taro from '@tarojs/taro'
import {
  create
} from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'

let app
let store
let dispatch

function createApp(opt) {
  // redux日志
  // opt.onAction = [createLogger()];
  app = create(opt)
  app.use(createLoading({}))

  // 适配支付宝小程序
  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {}
  }
  // 注入model
  if (!global.registered) opt.models.forEach(model => app.model(model))
  global.registered = true
  app.start()
  // 设置store
  store = app._store
  app.getStore = () => store

  dispatch = store.dispatch

  app.dispatch = dispatch
  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}

第三步，创建 models.js

至于你放哪里也看个人喜欢，我本人喜欢放在 models/index.js 下。

import ...
export default [...] // 导出model数组

// 如
// import home from './home'
// import ...
// export default [home, ...]

第四步，修改 app.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import models from './models';
import dva from './dva'
import './app.scss'

const dvaApp = dva.createApp({
  initialState: {},
  models: models
})

const store = dvaApp.getStore();
console.log(store);

class App extends Component {
  componentDidMount() {}

  componentDidShow() {}

  componentDidHide() {}

  componentDidCatchError() {}

  // this.props.children 是将要会渲染的页面
  render () {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }
}

export default App

注意

网上很多教程在这里引入的是 import { Provider } from '@tarojs/redux'，请改为 import { Provider } from 'react-redux' 否则会出现一堆错误。

PS：不知道是否2.x版本可以用，反正3.x版本会报错。

第五步，验证

在你需要连接 store 的组件

PS：网上这里引入的是 import { connect } from '@tarojs/redux'，这里改为引入 import { connect } from 'react-redux'

import React from 'react'
import { connect } from 'react-redux'
import { View } from '@tarojs/components'

@connect(({ home }) => ({
  home
}))

const Home = props => {
  const { home } = props

  return (
    <View>{home}</View>
  )
}

Last edited Feb 15