用Taro寫一個微信小程式（三）—— 配置dva
一、關於dva
🐨 dva 首先是一個基於 redux 和 redux-saga 的數據流方案，然後為了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。
🐨 具體內容可以看官網。
二、在taro中配置dva
1、安裝如下依賴
npm install --save dva-core dva-loading
npm install --save redux react-redux redux-thunk redux-logger
2、在src目錄下創建utils目錄，並在utils目錄里創建dva.js文件
src/utils/dva.js
import { create } from 'dva-core';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;
function createApp(opt) {
// redux日誌
app = create(opt);
app.use(createLoading({}));
// 注入model
if (!global.registered) opt.models.forEach(model => app.model(model));
global.registered = true;
app.start();
// 設置store
store = app._store;
app.getStore = () => store;
app.use({
onError(err) {
console.log(err);
}
})
// 設置dispatch
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch() {
return app.dispatch;
}
}
3、在src目錄下創建models目錄，並在models目錄里創建index.js文件
src/models/index.js（index.js返回項目中創建的所有model）
import common from './common'; export default [common];
src/models/common.js （common是創建的一個model）
export default { namespace: 'common', state: { name: '麥豇豆', }, effects: {}, reducers: { save(state, { payload }) { return { ...state, ...payload }; }, }, };
4、在入口文件app.js中創建一個app獲取store，並將store掛載到Provider容器裡面
src/app.js
import { Component } from 'react'
import { Provider } from 'react-redux'
import './app.scss'
import dva from './utils/dva'
import models from './models/index'
const dvaApp = dva.createApp({
initialState: {},
models,
});
const store = dvaApp.getStore();
class App extends Component {
// this.props.children 是將要會渲染的頁面
render () {
return <Provider store={store}>
{this.props.children}
</Provider>
}
}
export default App
這就配置好啦~【撒花】
三、驗證dva是否配置成功
在上面我已經創建了一個model，裡面存了name，下面我們就使用connect來連接這個model。
src/pages/home/index.js
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { connect } from 'react-redux'
import './index.scss'
class Index extends Component {
componentDidMount () {
console.log('props', this.props)
}
render () {
const { name } = this.props
return (
<View className='home'>
<Text className='title'>{name}</Text>
</View>
)
}
}
export default connect(({ common }) => ({ ...common }))(Index);
列印this.props，可以取到model裡面保存的state，頁面也可以正確展示出name。
END————————
平時則放蕩治游，考試則熟讀講義，不問學問之有無，惟爭分數之多寡；試驗既終，書籍束之高閣，毫不過問，敷衍三四年，潦草塞責，文憑到手，即可藉此活動於社會，豈非與求學初衷大相背馳乎？光陰虛度，學問毫無，是自誤也。
