重置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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
浅谈javascript中的闭包
May 13 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解微信小程序 登录获取unionid
Jun 27 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python中的日期时间处理详解
2016/11/17 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Python实现手势识别
2020/10/21 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
应届生会计求职信
2013/11/11 职场文书
教师求职信范文分享
2013/12/27 职场文书
个人自我剖析材料
2014/02/07 职场文书
个人创业事迹材料
2014/12/30 职场文书
营销计划书范文
2015/01/17 职场文书
酒店前台辞职书
2015/02/26 职场文书
员工工作表扬信
2015/05/05 职场文书
天堂的孩子观后感
2015/06/11 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js