微信小程序Redux绑定实例详解


Posted in Javascript onJune 07, 2017

微信小程序Redux绑定实例详解

安装

clone或者下载代码库到本地:

git clone https://github.com/charleyw/wechat-weapp-redux

将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下):

cd wechat-weapp-redux
 cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

上面的命令将包拷贝到小程序的libs目录下

使用

1.将Redux Store绑定到App上。

const store = createStore(reducer) // redux store
 
 const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
 const {Provider} = WeAppRedux;

Provider是用来把Redux的store绑定到App上。

App(Provider(store)({
 onLaunch: function () {
  console.log("onLaunch")
 }
}))

provider的实现只是简单的将store加到App这个global对象上,方便在页面中用getApp取出来

上面这段代码等同于:

App({
 onLaunch: function() {
   console.log( "onLaunch" )
  },
  store: store
})

2.在页面的定义上使用connect,绑定redux store到页面上。

const pageConfig = {
  data: {
  },
  ...
 }

页面的定义

const mapStateToData = state => ({
  todos: state.todos,
  visibilityFilter: state.visibilityFilter
 })

定义要映射哪些state到页面

const mapDispatchToPage = dispatch => ({
  setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
  toggleTodo: id => dispatch(toggleTodo(id)),
  addTodo: text => dispatch(addTodo(text)),
 })

定义要映射哪些方法到页面

const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)

使用connect将上述定义添加到pageConfig中。

Page(nextPageConfig);

注册小程序的页面

3.说明

完成上述两步之后,你就可以在this.data中访问你在mapStateToData定义的数据了。

mapDispatchToPage定义的action会被映射到this对象上。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
原生js实现轮播图
Feb 27 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
Ionic3 UI组件之Gallery Modal详解
Jun 07 #Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 #Javascript
vue2.0 自定义日期时间过滤器
Jun 07 #Javascript
详解Node.js 命令行程序开发教程
Jun 07 #Javascript
详解vee-validate的使用个人小结
Jun 07 #Javascript
微信小程序多张图片上传功能
Jun 07 #Javascript
Vue.js对象转换实例
Jun 07 #Javascript
You might like
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php函数的常用方法及注意之处小结
2011/07/10 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Vue的Options用法说明
2020/08/14 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python数据集切分实例
2018/12/08 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python容器类型公共方法总结
2020/08/19 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
服务之星事迹材料
2014/05/03 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
详解Go语言中Get/Post请求测试
2022/06/01 Golang