重置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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
javascript 跳转代码集合
Dec 03 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
Javascript的表单验证长度
Mar 16 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 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 array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
vue v-model的用法解析
2020/10/19 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python算法之栈(stack)的实现
2014/08/18 Python
Python获取邮件地址的方法
2015/07/10 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python封装原理与实现方法详解
2018/08/28 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
如何写python的配置文件
2020/06/07 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
终端业务员岗位职责
2013/11/27 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
2014年中秋寄语
2014/08/11 职场文书
2019年最新借条范本!
2019/07/08 职场文书
redis 解决库存并发问题实现数量控制
2022/04/08 Redis