重置Redux的状态数据的方法实现

网络编程 2021-07-04 15:02www.168986.cn编程入门

这篇文章主要介绍了重置Redux的状态数据的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

在 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，避免业务代码看上去太乱。

不过本文介绍一种更优雅的实现，需要用到一个小技巧，看狼蚁网站SEO优化代码

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

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

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

// reducers.js
const rootReducer = bineReducers({
 / your app's -level reducers /
})

 
export default rootReducer;

先封装一层，bineReducers 返回 reducer 函数，不影响功能

// reducers.js
const appReducer = bineReducers({
 / your app's -level reducers /
})

const rootReducer = (state, action) => {
 return appReducer(state, action)
}

export default rootReducer;

检测到特定重置数据的 action 后利用 undefined 技巧 (完整代码)

// reducers.js
const appReducer = bineReducers({
 / your app's -level reducers /
})

const rootReducer = (state, action) => {
 if (action.type === 'RESET_DATA') {
  state = undefined
 }

 return appReducer(state, action)
}

参考

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：vue使用一些外部插件及样式的配置代码下一篇：Nodejs使用archiver-zip-encrypted库加密压缩文件时报错

重置Redux的状态数据的方法实现

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

重置Redux的状态数据的方法实现

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设