全国服务热线:4008-888-888

公司新闻

物业管理微信小程序_重置Redux的状态数据的方法

重置Redux的状态数据的方法实现       这篇文章主要介绍了重置Redux的状态数据的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在 Redux 使用过程中,通常需要重置 store 的状态,比如应用初始化的时候、用户退出登录的时候,这样能够避免数据残留,避免 UI 显示了上一个用户的数据,容易造成用户数据泄露。

最简单的实现方法就是为每个独立的 store 添加RESET_APP 的 action,每次需要 reset 的时候,dispatch 这个 action 即可,如下代码

const usersDefaultState = [];
const users = (state = usersDefaultState, { type, payload }) = {
 switch (type) {
 case "ADD_USER":
 return [...state, payload];
 default:
 return state;

添加 reset action 后:

const usersDefaultState = []
const users = (state = usersDefaultState, { type, payload }) = {
 switch (type) {
 case "RESET_APP":
 return usersDefaultState;
 case "ADD_USER":
 return [...state, payload];
 default:
 return state;

这样虽然简单,但是当独立的 store 较多时,需要添加很多 action,而且需要很多个 dispatch 语句去触发,比如:

dispatch({ type: RESET_USER });
dispatch({ type: RESET_ARTICLE });
dispatch({ type: RESET_COMMENT });

当然你可以封装一下代码,让一个RESET_DATA 的 action 去触发多个 reset 的 action,避免业务代码看上去太乱。

不过本文介绍一种更优雅的实现,需要用到一个小技巧,看下面代码:

const usersDefaultState = []
const users = (state = usersDefaultState, { type, payload }) = {...}

当函数参数 state 为 undefined 时,state 就会去 usersDefaultState 这个默认值,利用这个技巧,我们可以在 rootReducers 中检测 RESET_DATA action,直接赋值 undefined 就完成了所有 store 的数据重置。实现代码如下:

我们通常这样导出所有的 reducers

// reducers.js
const rootReducer = combineReducers({
 /* your app's top-level reducers */



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服