代码仓: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;
}
}
- 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 => {
}
})
})
}