微信小程序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 数据缓存data(name, value)详解及实现
Jan 04 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
vue项目实现分页效果
Mar 24 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
第八节--访问方式
2006/11/16 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python数组复制拷贝的实现方法
2015/06/09 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python脚本调试工具安装过程
2021/01/11 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
采购文员岗位职责
2013/11/20 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
党员三严三实心得体会
2014/10/13 职场文书
捐资助学感谢信
2015/01/21 职场文书
酒店前台岗位职责
2015/04/16 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
学生会任命书范本
2015/09/21 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏