微信小程序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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
js获取图片宽高的方法
Nov 25 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
vue实现滑动到底部加载更多效果
Oct 27 Javascript
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
PHP邮件专题
2006/10/09 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
javascript调试说明
2010/06/07 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
深入理解Node module模块
2018/03/26 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
20行python代码实现人脸识别
2019/05/05 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python区分不同数据类型的方法
2019/10/14 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
初中化学教学反思
2014/01/23 职场文书
教师年度考核评语
2014/04/28 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript