Skip to main content

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)