taro+dva的實踐

先貼上文檔連接

taro: nervjs.github.io/taro/docs/R…

dva: dvajs.com/guide/

1. taro的安裝官網說的很詳細，再也不贅述

2. 安裝redux：

cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
複製代碼

3. 安裝dva:

cnpm install --save dva-core dva-loading
複製代碼

4. dva配置文件: /src/utils/dva.ts

import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app
let store
let dispatch
let registered

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

  if (!registered) opt.models.forEach(model => app.model(model))
  registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  app.use({
    onError(err) {
      console.log(err)
    },
  })

  dispatch = store.dispatch

  app.dispatch = dispatch
  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}
複製代碼

5. 配置dvaApp的models: /src/models/index.ts，後面各個page的models都須要在這裏"註冊"一下

import index from '../pages/index/model'

export default [
    index
]
複製代碼

6. 引入dva：/src/app.tsx，其中componentDidMount的生命週期函數你們能夠本身配置，不用參考

import Taro, { Component, Config } from '@tarojs/taro'
import Index from './pages/index'
import "@tarojs/async-await";
import { Provider } from "@tarojs/redux";
import dva from './utils/dva'
import models from './models';
import { globalData } from "./utils/common";
import './app.less'

// 若是須要在 h5 環境中開啓 React Devtools
// 取消如下注釋：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

const dvaApp = dva.createApp({
  initialState: {},
  models: models,
});
const store = dvaApp.getStore();   //  getStore是一個函數！！！要執行！！！



class App extends Component {

  config: Config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  async componentDidMount () {
    // 獲取參數  涉及到globalData
    const referrerInfo = this.$router.params.referrerInfo;
    const query = this.$router.params.query;
    !globalData.extraData && (globalData.extraData = {});
    if (referrerInfo && referrerInfo.extraData) {
      globalData.extraData = referrerInfo.extraData;
    }
    if (query) {
      globalData.extraData = {
        ...globalData.extraData,
        ...query
      };
  }
}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 類中的 render() 函數沒有實際做用
  // 請勿修改此函數
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
      
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

複製代碼

至此taro+dva就配置完畢了，具體models是放在每一個page的文件目錄下仍是統一放在單個文件目錄下可根據本身習慣