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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • redux中间件之redux-thunk的具体使用

    redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree .创建store的时候需要传入reducer,真正能改变store中数据的是store.dispatch API. 1.概念 dispatch一个action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware.你可以利用 Redux middleware 来进行日志记录.创建崩溃报告.调用

  • 基于React+Redux的SSR实现方法

    基于React+Redux的SSR实现方法

    为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用 Redux 的简单的 React 应用程序,实现服务端渲染(SSR).该示例包括异步数据抓取,这使得任务变得更有趣. 如果您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr 安装环境 在开始编写应用之前,需要我们先把环境编译/打包环境

  • Redux 和 Mobx的选择问题：让你不再困惑！

    我在去年大量的使用了 Redux,但我最近都在使用 Mobx 来做状态(state)管理.似乎现在社区里关于该选什么来替代 Redux 很自然地成为了一件困惑的事.开发者不确定该选择哪种解决方案.这个问题并不只是出现在 Redux 与 Mobx 上.无论何时,只要存在选择,人们就会好奇最好的解决问题的方式是什么.我现在写的这些是为了解决 Redux 和 Mobx 这两个状态管理库之间的困惑. 大部分的文章都用 React 来介绍 Mobx 和 Redux 的用法.但是在大部分情况下你都可以将 R

  • 让Vue也可以使用Redux的方法

    上周末看Vuex源码,突发灵感,为什么都是Vuex啊. 于是蛋疼一下午写了一个插件来帮助Vue可以使用Redux Gayhub Url Vue-with-Redux 这是一个用于帮助Vue使用Redux管理状态的插件.Redux是一个非常流行的状态管理工具.vue-with-redux为大家提供一个可以在Vue环境下使用Redux的途径.这回带来不同的开发体验. 开始 首先你需要通过如下命令安装vue-with-redux npm install -save vue-with-redux 运行D

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 简单介绍react redux的中间件的使用

    用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增删改查操作的一种框架,它不仅仅适用于react,也使用于其他前端框架.研究过redux源码的人都觉得该源码很精妙,而本博文就针对redux中对中间件的处理进行介绍. 在讲redux中间件之前,先用两张图来大致介绍一下redux的基本原理: 图中就是redux的基本流程,这里就不细说. 一般在react中不仅仅利用redux,还利用到react-redux: react-redux这里也不细说.

  • react-redux中connect的装饰器用法@connect详解

    最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect. 通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component.假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写: import React from 'react' import {render} from 'react-dom' import {connect} from 'react-redux' i

  • react-redux中connect()方法详细解析

    react-redux中connect()方法详细解析

    组件 React-Redux将所有组件分为两大类:展示组件(UI组件),容器组件 展示组件有以下几个特征: 只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux 的 API 容器组件有以下几个特征: 负责管理数据和业务逻辑,不负责 UI 的呈现 带有内部状态 使用 Redux 的 API 总结为一点: 展示组件负责 UI 的呈现,容器组件负责管理数据和逻辑 connect方法解析 下图是c

  • 浅谈redux以及react-redux简单实现

    写在前头 redux 简介 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态). 这些 state 可能包括服务器响应.缓存数据.本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等. 管理不断变化的 state 非常困难.如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,

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

    在 Redux 使用过程中,通常需要重置 store 的状态,比如应用初始化的时候.用户退出登录的时候,这样能够避免数据残留,避免 UI 显示了上一个用户的数据,容易造成用户数据泄露. 最简单的实现方法就是为每个独立的 store 添加RESET_APP 的 action,每次需要 reset 的时候,dispatch 这个 action 即可,如下代码 const usersDefaultState = []; const users = (state = usersDefaultState,

  • vue单页应用在页面刷新时保留状态数据的方法

    在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的

  • javascript Redux的状态管理详解

    javascript Redux的状态管理详解

    所谓的状态管理,就是对应用程序中的数据进行管理. 理念:凡是数据流管理混乱的项目,几乎都上不了线.好的项目,必须有非常良好的数据流管理. 如何使用Redux?记住“3个3”. 第1个三:3个api,createStore.combineReducers.applyMiddleware 第2个三:3个特点,store单一数据源.store只读的.只能通过reducer纯函数来修改store. 第3个三:3个概念,store.action.reducer. 基本概念: state 包含所有数据,用来

  • ajax结合mysql数据库和smarty实现局部数据状态的刷新方法

    效果状态:通过点击锁定状态实现状态锁定与不锁定之间的切换 1.主程序:01.php导入smarty和mysql类,取得数据导入列表模板 <?php include './include/Mysql.class.php'; include './libs/Smarty.class.php'; $db=new Mysql; $smarty=new Smarty; $lists=$db->getALL('users'); $smarty->assign('lists',$lists); $sm

  • 解说mysql之binlog日志以及利用binlog日志恢复数据的方法

    众所周知,binlog日志对于mysql数据库来说是十分重要的.在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全备份+binlog日志恢复增量数据部分),化险为夷! 废话不多说,下面是梳理的binlog日志操作解说: 一.初步了解binlog MySQL的二进制日志binlog可以说是MySQL最重要的日志,它记录了所有的DDL和DML语句(除了数据查询语句select),以事件形式记录,还包含语句所执行的消耗的时间,MySQL的二进制日志是事务安全型的. ---

  • java 结合jQuery实现跨域名获取数据的方法

    一.什么是跨域? 由于浏览器出于安全的考虑,采取了同源策略的限制,使得jQuery无法直接跨域名互相操作对象或数据.例如:a.com 域名下的 a.html页面利用jQuery无法操作b.com 域名下b.html页面的对象或是数据, 并且默认情况下也不能操作test.a.com域名下的 test.html的 对象或是数据 .只要满足下面条件的jQuery都会视为跨域名: 1.主域相同,子域不同,如xxx.aaa.com和yyy.aaa.com 2.域名相同,端口不同,如xxx.aaa.com:

  • Layui表格行工具事件与数据回填方法

    使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: <script type="text/html" id="barDemo2"> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="compile">编辑</a> <a class

  • 在react中使用vue的状态管理的方法示例

    我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验 在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r

  • React Hooks获取数据实现方法介绍

    目录 前言 useState useEffect 获取数据 前言 react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强. useState useState类似于class组件的state功能,用于更新视图 import React, { Component, useState } from 'react'; export default function Hello() { const [count, setCount] = useState(0);

  • 使用Angular缓存父页面数据的方法

    angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置.再做的过程当中查过 许多资料,都说的不很详细,今天把方法记录下来,供参考. 要想缓存,要用到嵌套路由(ui-router):    有三个嵌套的方法: 使用"点标记法",例如:.state('contacts

随机推荐