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的文件目录下仍是统一放在单个文件目录下可根据本身习惯