目录结构
- common 项目公共组件,授权组件
- config 项目配置文件
- filter 项目wxs处理filter
- images 项目图片文件夹
- pages 小程序页面
- redux 处理请求reducer
- utils 公共方法
- wechart-redux 小程序redux核心文件
使用方法
- 入口app.js
- 引入redux核心包,createStore,Provider
- 创建store
- 将Redux Store绑定到App上(Provider是用来把Redux的store绑定到App上)
-
redux/app.redux.js
自己偷懒把action和reducer写到一起了 -
pages/index.js 页面如何调用
熟悉react redux的一眼就会看出来是如何使用的,原理参考react-redux
1) 在页面的定义上使用connect,绑定redux store到页面上
2) 定义要映射哪些state到页面
3) 使用connect将上述定义添加到pageConfig中
完成上述两步之后,你就可以在this.data中访问你在mapStateToData定义的数据了。
- wechat-redux 核心包
由于内容比较多,原理类似于redux,直接上图
1) connect.js
-
createStore.js
-
provider.js
-
wrapActionCreators.js
-
index.js
总结:
以上主要是借鉴了react-redux实现了小程序redux数据状态管理,目前还没有正式在项目中使用,后期还需要优化,如有不对还请各位大佬指点,谢谢
你们有使用过多端框架吗
大哥留个git地址吧
先收藏,回头消化,非常感谢整理。