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)
网友评论