重置Redux的状态数据的方法实现
在Redux使用过程中,通常需要重置store的状态,比如应用初始化的时候、用户退出登录的时候,这样能够避免数据残留,避免UI显示了上一个用户的数据,容易造成用户数据泄露。
最简单的实现方法就是为每个独立的store添加RESET_APP的action,每次需要reset的时候,dispatch这个action即可,如下代码
constusersDefaultState=[]; constusers=(state=usersDefaultState,{type,payload})=>{ switch(type){ case"ADD_USER": return[...state,payload]; default: returnstate; } };
添加resetaction后:
constusersDefaultState=[] constusers=(state=usersDefaultState,{type,payload})=>{ switch(type){ case"RESET_APP": returnusersDefaultState; case"ADD_USER": return[...state,payload]; default: returnstate; } };
这样虽然简单,但是当独立的store较多时,需要添加很多action,而且需要很多个dispatch语句去触发,比如:
dispatch({type:RESET_USER}); dispatch({type:RESET_ARTICLE}); dispatch({type:RESET_COMMENT});
当然你可以封装一下代码,让一个RESET_DATA的action去触发多个reset的action,避免业务代码看上去太乱。
不过本文介绍一种更优雅的实现,需要用到一个小技巧,看下面代码:
constusersDefaultState=[] constusers=(state=usersDefaultState,{type,payload})=>{...}
当函数参数state为undefined时,state就会去usersDefaultState这个默认值,利用这个技巧,我们可以在rootReducers中检测RESET_DATAaction,直接赋值undefined就完成了所有store的数据重置。实现代码如下:
我们通常这样导出所有的reducers
//reducers.js constrootReducer=combineReducers({ /*yourapp'stop-levelreducers*/ }) exportdefaultrootReducer;
先封装一层,combineReducers返回reducer函数,不影响功能
//reducers.js constappReducer=combineReducers({ /*yourapp'stop-levelreducers*/ }) constrootReducer=(state,action)=>{ returnappReducer(state,action) } exportdefaultrootReducer;
检测到特定重置数据的action后利用undefined技巧(完整代码)
//reducers.js constappReducer=combineReducers({ /*yourapp'stop-levelreducers*/ }) constrootReducer=(state,action)=>{ if(action.type==='RESET_DATA'){ state=undefined } returnappReducer(state,action) }
参考:
ResettingReduxStatewithaRootReducer
HowtoresetthestateofaReduxstore?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。