脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 重置Redux状态

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

 更新时间：2019年11月18日 09:56:21   作者：Sdbybyd  
这篇文章主要介绍了重置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 */
})

 
export default rootReducer;

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

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

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

export default rootReducer;

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

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

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

 return appReducer(state, action)
}

参考：

Resetting Redux State with a Root Reducer
How to reset the state of a Redux store?

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

您可能感兴趣的文章:

相关文章

  • 微信小程序12行js代码自己写个滑块功能(推荐)

    微信小程序12行js代码自己写个滑块功能(推荐)

    这篇文章主要介绍了微信小程序12行js代码自己写个滑块功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-07
  • JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

    JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

    最近看一个网站，发现显示器不同的分辨率，样式文件调用的也不一样，于是很好奇研究并写了一个,经测试感觉还不错，感兴趣的你可以来看看哦
    2013-01-01
  • javascript制作sql转换为stringBuffer的小工具

    javascript制作sql转换为stringBuffer的小工具

    这篇文章主要介绍了javascript制作sql转换为stringBuffer的小工具，使用方法很简单，吧写好的sql语句只要格式化好之后放进去就可以了，推荐给大家，有需要的小伙伴可以参考下。
    2015-04-04
  • 跨浏览器通用、可重用的选项卡tab切换js代码

    跨浏览器通用、可重用的选项卡tab切换js代码

    今天一同学对我说“好吧,我准备去学习”,我大惊,这老勾引我打dota的也去学习,于是我好奇他学什么,他说要搞一个选项卡切换js
    2011-09-09
  • JavaScript获得选中文本内容的方法

    JavaScript获得选中文本内容的方法

    今天希望实现一个，直接在网页上选中文本，点击收藏夹的链接（javascript）即可弹出新窗口（类似“百度搜藏”和“QQ书签”），新窗口中的文本框即显示了选中的文本。
    2008-12-12
  • JS函数内部属性之arguments和this实例解析

    JS函数内部属性之arguments和this实例解析

    在函数内部，有两个特殊的对象：arguments和this。这篇文章主要介绍了函数内部属性之arguments和this ,需要的朋友可以参考下
    2018-10-10
  • js常用代码段整理

    js常用代码段整理

    以下是平时收集的几个常用代码段，大多数是从网上搜集而来。也均为未找到是谁谁原创，是否允许转载等要求， 所以如果看到的朋友发现其中有些代码是自己写的，还请原谅在下转帖出来
    2011-11-11
  • 使用JS编写的随机抽取号码的小程序

    使用JS编写的随机抽取号码的小程序

    这篇文章主要介绍了使用JS编写的随机抽取号码的小程序功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-08-08
  • 常用的js验证和数据处理总结

    常用的js验证和数据处理总结

    遇到需要对数据及表单验证的，我相信大家都像我一样，喜欢在网上找相关的方法，因为自己写的话，是比较耗时的。今天就给大家分享一下，自己在工作中总结的一些常用的js。
    2016-08-08
  • 微信小程序实现美团菜单

    微信小程序实现美团菜单

    这篇文章主要为大家详细介绍了微信小程序实现美团菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-06-06

最新评论