微信小程序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 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Vue项目实现换肤功能的一种方案分析
Aug 28 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
迟到检讨书900字
2014/01/14 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
公司开会通知
2015/04/20 职场文书
情况说明书怎么写
2015/10/08 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
Python os和os.path模块详情
2022/04/02 Python