重置Redux的状态数据的方法实现
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了重置Redux的状态数据的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
在 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,避免业务代码看上去太乱。
不过本文介绍一种更优雅的实现,需要用到一个小技巧,看狼蚁网站SEO优化代码:
const usersDefaultState = [] const users = (state = usersDefaultState, { type, payload }) => {...}
当函数参数 state 为 undefined 时,state 就会去 usersDefaultState 这个默认值,利用这个技巧,我们可以在 rootReducers 中检测 RESET_DATA action,直接赋值 undefined 就完成了所有 store 的数据重置。实现代码如下:
我们通常这样导出所有的 reducers
// reducers.js const rootReducer = bineReducers({ /* your app's -level reducers */ }) export default rootReducer;
先封装一层,bineReducers 返回 reducer 函数,不影响功能
// reducers.js const appReducer = bineReducers({ /* your app's -level reducers */ }) const rootReducer = (state, action) => { return appReducer(state, action) } export default rootReducer;
检测到特定重置数据的 action 后利用 undefined 技巧 (完整代码)
// reducers.js const appReducer = bineReducers({ /* your app's -level reducers */ }) const rootReducer = (state, action) => { if (action.type === 'RESET_DATA') { state = undefined } return appReducer(state, action) }
参考:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程