评论

小程序如何加入redux数据状态管理

react vue 都有自己的一套数据流状态管理,如何将redux应用到小程序中,是文章主要的内容(主要是闲暇之余自己搞了一下)

目录结构

  1. common 项目公共组件,授权组件
  2. config 项目配置文件
  3. filter 项目wxs处理filter
  4. images 项目图片文件夹
  5. pages 小程序页面
  6. redux 处理请求reducer
  7. utils 公共方法
  8. wechart-redux 小程序redux核心文件

使用方法

  1. 入口app.js
  • 引入redux核心包,createStore,Provider
  • 创建store
  • 将Redux Store绑定到App上(Provider是用来把Redux的store绑定到App上)
  1. redux/app.redux.js


    自己偷懒把action和reducer写到一起了

  2. pages/index.js 页面如何调用

    熟悉react redux的一眼就会看出来是如何使用的,原理参考react-redux
    1) 在页面的定义上使用connect,绑定redux store到页面上
    2) 定义要映射哪些state到页面
    3) 使用connect将上述定义添加到pageConfig中

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

  1. wechat-redux 核心包

    由于内容比较多,原理类似于redux,直接上图
    1) connect.js

  1. createStore.js

  2. provider.js

  3. wrapActionCreators.js

  4. index.js

总结:
以上主要是借鉴了react-redux实现了小程序redux数据状态管理,目前还没有正式在项目中使用,后期还需要优化,如有不对还请各位大佬指点,谢谢

最后一次编辑于  11-20  
点赞 0
收藏
评论

2 个评论

  • 曲尘
    曲尘
    11-26

    大哥留个git地址吧

    11-26
    赞同
    回复
  • 小肥羊🐑🥬
    小肥羊🐑🥬
    11-20

    先收藏,回头消化,非常感谢整理。

    11-20
    赞同
    回复