微信小程序开发之Redux绑定 – wechat-weapp-redux
凌雪 2018-10-10 来源 :网络 阅读 1827 评论 0

摘要:本文将带你了解微信小程序开发之Redux绑定 – wechat-weapp-redux,希望本文对大家学微信有所帮助。

本文将带你了解微信小程序开发之Redux绑定 – wechat-weapp-redux,希望本文对大家学微信有所帮助。


用于在微信小程序为页面绑定Redux Store。PS:   代码是基于react-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目录下使用将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
    })在页面的定义上使用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);注册小程序的页面说明完成上述两步之后,你就可以在this.data中访问你在mapStateToData定义的数据了。mapDispatchToPage定义的action会被映射到this对象上。Example详细的使用例子可以参照: wechat-weapp-redux-todos真机实测版请clone下面这个repo,用小程序开发工具开启预览:git   clone -b release https://github.com/charleyw/wechat-weapp-redux-todos.gi    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved