用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------------------------
平时则放荡治游,考试则熟读讲义,不问学问之有无,惟争分数之多寡;试验既终,书籍束之高阁,毫不过问,敷衍三四年,潦草塞责,文凭到手,即可借此活动于社会,岂非与求学初衷大相背驰乎?光阴虚度,学问毫无,是自误也。
用Taro写一个微信小程序(三)—— 配置dva的更多相关文章
- 用Taro写一个微信小程序(一)——开始一个项目
一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vu ...
- 用Taro写一个微信小程序(二)——配置目录别名
配置别名可以方便书写代码引用路径,让代码更整洁. 官方文档可参考https://nervjs.github.io/taro/docs/config-detail#alias 一.在config/ind ...
- 微信小程序——手把手教你写一个微信小程序
前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 ...
- 如何快速地开发一个微信小程序
如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...
- 开发一个微信小程序教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...
- 开发一个微信小程序项目教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...
- 开发一个微信小程序实例教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...
- 撸了一个微信小程序项目
学会一项开发技能最快的步骤就是:准备,开火,瞄准.最慢的就是:准备,瞄准,瞄准,瞄准-- 因为微信小程序比较简单,直接开撸就行,千万别瞄准. 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男 ...
- 用Taro做个微信小程序Todo, 小白工作记录
微信小程序框架: Taro 做微信小程序的框架, 几个比较主流的: 官方的WePY: https://tencent.github.io/wepy/document.html#/ 美团的mpvue: ...
随机推荐
- POJ 2976 01分数规划基础题目
题意: 给你一组"数",一共n个,每个数有两个权值,价钱a[i],代价b[i],让你选择n - k使得 sigma(a[i]) / sigma(b[i]) * 100 ...
- PE文件格式偏移参考
在进行PE文件格式病毒分析的时候,经常要使用到PE文件格式的解析,尤其是对LoadPE形式的病毒的分析,经常要查看PE文件格式的偏移,特地从博客<PE文件格式的偏移参考>中转载收录一份,之 ...
- POJ2044 深搜+剪枝(云彩下雨)
题意: 有一个城镇,是4*4的大小的,然后你控制一块云彩,2*2的,你每天可以有9种走的方法,上下左右,或者不动,走的时候可以走1或者2步,云彩所在的地方肯定会下雨,然后给你做多365天 ...
- UVA10780幂和阶乘
题意: 输入两个整数n,m(1<m<5000,0<n<10000)求最小的k使得m^k是n!的因子. 思路: 比较容易想,一开始手残wa了好几次,我们直接 ...
- layui中时间插件laydate的使用
1.加载layui.js 2.html部分 <div class="layui-inline"> <label class="layui-form-la ...
- VBO、VAO和EBO
Vertex Buffer Object 对于经历过fixed pipeline的我来讲,VBO的出现对于渲染性能提升让人记忆深刻.完了,暴露年龄了~ //immediate mode glBegin ...
- Codeforces Round #692 (Div. 2, based on Technocup 2021 Elimination Round 3)
A.In-game Chat 题目:就是从后面数连着的'('的个数是不是严格比剩下的字符多 思路:水题,直接从后往前遍历即可 代码: #include<iostream> #include ...
- Java集合详解(一):全面理解Java集合
概述 Java所有集合类都在java.util包下,支持并发的集合在java.util.concurrent(juc)包下. 集合与数组区别: 数组大小是固定的,集合大小可以根据使用情况进行动态扩容. ...
- 『政善治』Postman工具 — 13、Postman接口测试综合练习
目录 (一)项目接口文档 1.鉴权接口 2.注册接口 3.登录接口 4.用户信息接口 5.注销接口 (二)网站上手动验证 (三)Postman测试实现 1.准备工作 (1)创建一个Collection ...
- Ribbon导航
简介 最近都在弄微服务的东西,现在来记录下收获.我从一知半解到现在能从0搭建使用最大的感触有两点 1.微服务各大组件的版本很多,网上很多博客内容不一定适合你的版本,很多时候苦苦琢磨都是无用功 2.网上 ...