Taro 笔记
在 Taro 上使用 dva
src/store.js
import { create } from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'
let app
let store
let dispatch
function createApp(opt) {
// redux日志
// Object.assign(opt, {
// onAction: [createLogger()]
// })
app = create(opt)
app.use(createLoading({}))
if (!global.registered) opt.models.forEach(model => app.model(model))
global.registered = true
app.start()
// eslint-disable-next-line no-underscore-dangle
store = app._store
app.getStore = () => store
dispatch = store.dispatch
app.dispatch = dispatch
return app
}
export default {
createApp,
getDispatch() {
return app.dispatch
}
}
src/app.js
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
// ...
import dva from './store'
import models from './models'
const dvaApp = dva.createApp({
initialState: {},
models,
})
const store = dvaApp.getStore()
class App extends Component {
// ...
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
}
Taro.render(<App />, document.getElementById('app'))
src/models/index.js
归纳所有的 model 文件
import home from '@/pages/home/model'
import count from './count'
export default [count, home]
src/models/count.js
export default {
namespace: 'count',
state: {
count: 0,
},
effects: {
*addAfterOneSecond(action, { call, put }) {
yield call(delay, 1000)
yield put({ type: 'add' })
},
},
reducers: {
add (state) {
return {
count: state.count + 1
}
},
},
}
request 方法封装
import Taro from '@tarojs/taro'
const baseConfig = {
baseUrl: 'http://localhost:7300/mock/5e44f224a4de7a8083850859/saas'
}
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)。',
204: '删除数据成功。',
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
401: '用户没有权限(令牌、用户名、密码错误)。',
403: '用户得到授权,但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除,且不会再得到的。',
422: '当创建一个对象时,发生一个验证错误。',
500: '服务器发生错误,请检查服务器。',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。',
}
const checkStatus = response => {
const errortext = codeMessage[response.statusCode] || response.errMsg
Taro.showModal({
title: `请求错误 ${response.statusCode}: ${response.url}`,
content: errortext,
})
return response
}
function request (url, method, { data, headers, baseUrl }) {
const preUrl = baseUrl ? baseUrl.replace(/\/$/, '') : baseConfig.baseUrl
const requestUrl = `${preUrl}/${url.replace(/^\//, '')}`
// Taro.showLoading({
// title: 'loading',
// mask: true
// })
return Taro.request({
url: requestUrl,
method,
data,
// 不发送 cookie
credentials: 'omit',
header: {
'content-type': 'application/json',
...headers,
},
}).then(res => {
if (res.statusCode >= 200 && res.statusCode < 300) {
if (!res.data.success) {
Taro.showToast({
title: res.data.message || '请求错误',
icon: 'none',
duration: 1000,
mask: true,
})
}
return res.data
}
throw res
}).catch(error => checkStatus(error))
}
export const get = (url, params = {}, config = {}) => request(url, params, config)
export const post = (url, data = {}, config = {}) => request(url, data, config)
export const put = (url, data = {}, config = {}) => request(url, data, config)
export const dele = (url, params = {}, config = {}) => request(url, params, config)