重置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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
详解JavaScript中的this指向问题
Feb 05 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+oracle 分页类
2006/10/09 PHP
文章推荐系统(二)
2006/10/09 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
jQuery参数列表集合
2011/04/06 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
跟老齐学Python之开始真正编程
2014/09/12 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
利用python计算时间差(返回天数)
2019/09/07 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
C#基础面试题
2016/10/17 面试题
方正Java笔试题
2014/07/03 面试题
《春到梅花山》教学反思
2014/04/16 职场文书
大学开学计划书
2014/04/30 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers