hooks 使用dva_Taro3 中使用dva

刚刚用Taro3写完一个小程序, 正式开发之前, 在redux跟dva之间犹豫不知道要选哪个, 后面得知要在两个星期内把这个小程序写完, 果断选了易学易用的dva

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

// cli只有redux, 没有dva的选项可以选

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 (

{this.props.children }

)

}

}

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)