Skip to content

yupeifeng/reduxm-reactnative

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

为了更好的使用Redux,进行二次封装(针对ReactNative)

内容目录

  1. redux存在的问题
  2. 设计思想
  3. api
  4. 使用注意点
  5. 示例

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下所有初始数据)
    */
   import Store from './store/store';
   /**
    * store修饰器,处理整个store层存入数据工厂
    * @params storeName(数据层名称), allActionType(改变整个数据层的actionType), allStoreLogs(改变整个数据层的打印日志级别)
    * @return true
    */
   const store = Store.store;
   /**
    * storeActionType修饰器,按名称录入actionType
    * @params actionType(数据改变响应type), level(日志级别)
    * @return target
    */
   const storeActionType = Store.storeActionType;
   /**
    * storeUnDestroy修饰器,按名称录入是否不需要销毁
    * @return target
    */
   const storeUnDestroy = Store.storeUnDestroy;
   /**
    * storeComputed修饰器,按名称录入计算者(由某个值计算得来)
    * @params dependency(依赖的属性被计算者), level(日志级别)
    * @return target
    */
   const storeComputed = Store.storeComputed;

   /**
    * connectStore修饰器,连接数据,事件和reactDom,代理target并完善componentWillUnmount生命周期离开页面触发数据销毁
    * @params storeList[](页面所需数据层名称), destroyStoreList[](离开页面销毁数据层名称)
    * @return reactDom
    */
   import connectStore from './connect/connectstore';

   /**
    * 事件注入层
    */
   import Action from './action/action';
   /**
    * action修饰器,处理整个action层存入事件工厂
    * @param actionName(事件层名称)
    * @return target
    */
   const action = Action.action;
   /**
    * actionProps修饰器,按名称录入action
    * @params actionFunName(事件名称), level(日志级别)
    * @return target
    */
   const actionProps = Action.actionProps;
   /**
    * actionGlobal修饰器,录入全局性action,页面使用this.props[actionName][actionFunName],谨慎使用
    * @params actionFunName(事件名称), level(日志级别)
    * @return target
    */
   const actionGlobal = Action.actionGlobal;
   /**
    * actionInjection修饰器,按名称反向注入事件到reactDom
    * @param actionName(事件名称)
    * @return target
    */
   const actionInjection = Action.actionInjection;

   export {
   	Store,
   	store,
   	storeActionType,
   	storeUnDestroy,
   	storeComputed,
   	connectStore,
   	action,
   	actionProps,
   	actionGlobal,
   	actionInjection
   };

使用注意点

  1. redux数据共享导致,store改变所有组件都render,如发现页面卡顿把大的数据放入本组件state维护
  2. 为了方便使用,Store中提供getAllInitData方法,获取storeName下所有初始数据,减少想手动初始化数据时的重复性定义。
  3. (dispatch, _this),action中第二个的系统级入参,提供_this,方便action内部函数互相调用。
  4. 为了简化省去回调,复用不同action文件中方法,提供actionGlobal注解解决

示例

见example文件夹下

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published