重置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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。