Taro3 中使用dva

1.用Taro的cli初始化项目之后安装依赖

  npm install --save dva-core dva-loading
  npm install --save redux react-redux redux-thunk redux-logger

2. 新增src/utils/dva.ts (需要自己建这个文件)

// src/utils/dva.ts 
import {create } from 'dva-core';
// import {createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app: {use: (arg0: any) => void; model: (arg0: any) => any; start: () => void; _store: any; getStore: () => any; dispatch: any};
let store: {dispatch: any};
let dispatch: any;
let registered: boolean;

function createApp(opt: {models: any[]; initialState: any }) {

  // redux日志, 引用redux-logger
  // opt.onAction = [createLogger()];
  app = create(opt);
  app.use(createLoading({}));


  if (!registered) opt.models.forEach((model: any) => 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;
  },
  getStore() { // 这个是在非组件的文件中获取Store的方法, 不需要可以不暴露
    return app.getStore();
  },
};

3. 新增 src/models/index.ts (需要自己建这个文件)

import common from '@/pages/models/common';

export default [common]; // 这里是数组, 数组中的每个项都是独立的模块

4. 新增 common.ts (需要自己建这个文件, 可以随便放, 在models/index.ts引入才能用)

import Taro from '@tarojs/taro';

export default {
  namespace: 'common', // 这是模块名
  state: { // 初始化数据
    accessToken: Taro.getStorageSync('accessToken') || '',
    isSubscribe: !!Taro.getStorageSync('isSubscribe'),
  },

  effects: { 
    // 异步方法, 在这里可以用put调用同步的方法
    // generator  这里的方法第二个参数都是{call, put }, call调用异步方法, put 可以调用reducers中的方法
    * saveStorageSync({payload, cb }, {call, put }) {
      for (let index = 0; index <  Object.keys(payload).length; index++) {
        yield call(Taro.setStorage, {
          key: Object.keys(payload)[index],
          data: payload[Object.keys(payload)[index]]
        });
      }
      cb && cb();
      yield put({
        type: 'save', // 方法名
        payload,// 参数
      })
    },
  },

  reducers: { // 同步方法
    save(state, {payload }) {
      return {...state, ...payload };
    },
  },
};

5. app.tsx

import Taro from '@tarojs/taro'
import React, {Component } from 'react'
/* dva */
import {Provider} from 'react-redux'
import dva from './utils/dva'
import models from './models/index'

// 全局样式
// import './styles/base.scss'

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

class App extends Component {

  componentDidMount () {
    if (process.env.TARO_ENV === 'weapp') {
      // 云开发初始化
      // Taro.cloud.init({env:'',traceUser: true,})
    }
  }

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render() {
    return (
      <Provider store={store} >
        {this.props.children }
      </Provider>
    )
  }
}

export default App

6. 在页面组件中使用

import {connect } from 'react-redux'

@connect(({common   /* 需要哪些模块都写在这里 */    }) => ({
  accessToken: common.accessToken,   // 这里定义的值会传给页面的props
}))    // connect必须写在class 前面(中间也可以有其他装饰器)
export default class Index extends React.Component {
  // ...
  
    async UNSAFE_componentWillMount() {
        console.log(this.props.accessToken)// 可以在组件中获取到
    }

    this.props.dispatch({    // dispatch方法也会自动挂载到页面的props
        type: 'common/saveStorageSync',    //   '模块名/方法名'
        payload: {   // payload 是参数
          accessToken: '',
          isSubscribe: false,
        },
    }).then(() => {
      // dispatch方法可以.then 在数据更新之后再操作, 比如数据更新之后再跳转页面

    })


}

7. 在非组件的文件中使用

// dispatch
import dva from '@/utils/dva'
const dispatch = dva.getDispatch()
dispatch({
      type: 'common/saveStorageSync',
      payload: {
        accessToken: '',
        isSubscribe: false,
      },
  })


//store  
import dva from '@/utils/dva'
const store = dva.getStore()
const { common } = store.getState()
console.log(common.accessToken)