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


Posted in Javascript onNovember 18, 2019

在 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?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
js性能优化技巧
Nov 29 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
JavaScript数值类型知识汇总
Nov 17 #Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 #Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 #Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 #Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 #Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 #Javascript
vue中注册自定义的全局js方法
Nov 15 #Javascript
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
详解python中list的使用
2019/03/15 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python能自学吗
2020/06/18 Python
python脚本第一行如何写
2020/08/30 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
在线课程:Skillshare
2019/04/02 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
优秀老师事迹材料
2014/02/05 职场文书
青春寄语大全
2014/04/09 职场文书
爱护公共设施标语
2014/06/24 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS