用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------------------------
平时则放荡治游,考试则熟读讲义,不问学问之有无,惟争分数之多寡;试验既终,书籍束之高阁,毫不过问,敷衍三四年,潦草塞责,文凭到手,即可借此活动于社会,岂非与求学初衷大相背驰乎?光阴虚度,学问毫无,是自误也。