reduxm-reactnative
为了更好的使用Redux,进行二次封装(针对ReactNative)
内容目录
redux存在的问题
- 一份store树,离开页面再次进入,数据不会初始化
- reducer拆分造成汇总困难
- action的type管理混乱,重复问题
- 繁杂的使用规则,index页面action和store引入,纯函数reducer大量case仅仅为了改变一个值
设计思想(@修饰器)
- connectstore对ReactDom继承注入action和store,重写componentWillUnmount生命周期,离开页面自动触发store初始化
- 使用@修饰器、store对reducer提取存入reducerfactory,action对action提取存入actionfactory和actiontypefactory
- action的type跟随store定义,并隐式添加命名空间解决type重复问题、以及隐式case定义省略大量case
api
/** * 数据注入层 * 提供createStore、getActionType、getAllInitData四个方法 * * createStore方法,绑定数据到整个react路由层 * @params router(react路由), debug(是否开启调试工具) * @return reactRouter * * getActionType方法,获取storeName下所有actionType * @param storeName(数据层名称) * @return {}(storeName下所有actionType) * * getAllInitData方法,获取storeName下所有初始数据 * @param storeName(数据层名称) * @return {}(storeName下所有初始数据) */ ; /** * store修饰器,处理整个store层存入数据工厂 * @params storeName(数据层名称), allActionType(改变整个数据层的actionType), allStoreLogs(改变整个数据层的打印日志级别) * @return true */ const store = Storestore; /** * storeActionType修饰器,按名称录入actionType * @params actionType(数据改变响应type), level(日志级别) * @return target */ const storeActionType = StorestoreActionType; /** * storeUnDestroy修饰器,按名称录入是否不需要销毁 * @return target */ const storeUnDestroy = StorestoreUnDestroy; /** * storeComputed修饰器,按名称录入计算者(由某个值计算得来) * @params dependency(依赖的属性被计算者), level(日志级别) * @return target */ const storeComputed = StorestoreComputed; /** * connectStore修饰器,连接数据,事件和reactDom,代理target并完善componentWillUnmount生命周期离开页面触发数据销毁 * @params storeList[](页面所需数据层名称), destroyStoreList[](离开页面销毁数据层名称) * @return reactDom */ ; /** * 事件注入层 */ ; /** * action修饰器,处理整个action层存入事件工厂 * @param actionName(事件层名称) * @return target */ const action = Actionaction; /** * actionProps修饰器,按名称录入action * @params actionFunName(事件名称), level(日志级别) * @return target */ const actionProps = ActionactionProps; /** * actionGlobal修饰器,录入全局性action,页面使用this.props[actionName][actionFunName],谨慎使用 * @params actionFunName(事件名称), level(日志级别) * @return target */ const actionGlobal = ActionactionGlobal; /** * actionInjection修饰器,按名称反向注入事件到reactDom * @param actionName(事件名称) * @return target */ const actionInjection = ActionactionInjection; ;
使用注意点
- redux数据共享导致,store改变所有组件都render,如发现页面卡顿把大的数据放入本组件state维护
- 为了方便使用,Store中提供getAllInitData方法,获取storeName下所有初始数据,减少想手动初始化数据时的重复性定义。
- (dispatch, _this),action中第二个的系统级入参,提供_this,方便action内部函数互相调用。
- 为了简化省去回调,复用不同action文件中方法,提供actionGlobal注解解决
示例
见example文件夹下