taro如何搭配dva使用？

代码仓：https://gitee.com/songjinyang/taro
1.在taro项目中装包：

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

2 新建dva.js

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) {
  // redux日志
  options.onAction = [createLogger()];

  app = create(options);

  app.use(createLoading({}));

  if (!global.registered) options.models.forEach(model => app.model(model));

  registered = true;

  app.start();

  store = app._store;

  app.getStore = () => store;

  dispatch = store.dispatch;

  app.dispatch = dispatch;

  return app;
}

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

3. src目录新建models文件夹，再建 index.js , common.js
   common:

import { getMyCity } from '@/servers/index'
export default {
    namespace: 'common',
    state: {
      name:'sjy'
    },
    effects: {
      *testRequest({payload},{put,call}){
        let res = yield call(getMyCity, payload.data)
        // console.log(res)
        if (res.data.code === 'S000000') {
          yield put({
            type: 'changeName',
            payload: {
              name: '请求后的名字就叫后生'
            }
          })
        } else {
         console.log('else');
        }
        return res
      }
    },
  
    reducers: {
      changeName(state, { payload }) {
        return { ...state, ...payload }
      }
    }
  }

index:

import common from './common';
export default [
  common
]

4.app.js配置

import React, { Component } from 'react'
import { Provider } from 'react-redux';
import dva from './utils/dva';
import models from './models';
import './app.less'
const dvaApp = dva.createApp({
  initialState: {},
  models: models,
})

const store = dvaApp.getStore();
class App extends Component {

  componentDidMount() { }

  componentDidShow() { }

  componentDidHide() { }

  componentDidCatchError() { }

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

export default App

4 测试页面

import Taro from '@tarojs/taro'
import React, { Component } from 'react'
import { View, Text,Button } from '@tarojs/components'
import './index.less'
import { connect } from 'react-redux'
@connect(({ common }) => ({ common }))
export default class Index extends Component {

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  toTest = () => {
    Taro.navigateTo({
      url: '/pages/test/index?id=1'
    })
  }
  changeName() {
    this.props.dispatch({
      type: 'common/changeName',
      payload: {
        name: 'sss'
      }
    })
    this.props.dispatch({
      type: 'test/changeSex',
      payload: {
        sex: '女'
      }
    })
  }
  request() {
    this.props.dispatch({
      type: 'common/testRequest',
      payload: {
        data: { cc: '1' }
      }
    }).then(res => {
      console.log(res);
    })
  }

  render() {
    return (
      <View className='index'>
        <Button>{this.props.common.name}</Button>
        <Text onClick={() => { this.toTest() }} >点我去test页面 </Text>
        <View onClick={() => { this.changeName() }}>点我修改名字</View>
        <View onClick={() => { this.request() }}>点我测试发送请求</View>
      </View>
    )
  }
}

5相关js:
server .js

import { wxRequest } from '@/utils/request'
export let  getMyCity = (data = {}) =>{
  return wxRequest({
    method: 'POST',
    url: '/lifeHome/projectListPage',
    data
  })
}

request.js

import Taro from '@tarojs/taro'

const env = 'dev'
let baseUrl = ''
switch (env) {
  case 'dev':
    baseUrl = 'https://....'
    break
  case 'prod':
    baseUrl = 'https://生产'
    break
  default:
    break
}
export const wxRequest = data => {
  let header = {
    token: wx.getStorageSync('token')
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + data.url,
      method: data.method || 'POST',
      data: data.data || {},
      header: {
        'Content-Type': 'application/json',
        token: wx.getStorageSync('token')
      },
      success: res => {
        if (res.data.code === 'S0001') {
          wx.removeStorage({
            key: 'token'
          })
          wx.showToast({
            title: '登录超时，即将跳转登录页面',
            icon: 'none',
            duration: 1300,
            success: () => {
              wx.reLaunch({
                url: '/pages/login/index'
              })
              console.log('打印了')
            }
          })
        } else {
          resolve(res)
          console.log(res);
        }
      },
      fail: res => {
        if (res.errMsg.includes('timeout')) {
          wx.showToast({
            title: '网络超时',
            icon: 'none'
          })

        } else {
          wx.showToast({
            title: '网络错误',
            icon: 'none'
          })
        }

        reject(res)
      },
      complete: res => {
      }
    })
  })
}