使用 Redux 管理 React 项目中的 session localStorage 之二

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在上一篇文章中,我们介绍了如何使用 Redux 管理 React 项目中的 session localStorage。本篇文章将为大家继续深入讲解如何实现 session localStorage 的持久化存储以及如何使用 Thunk middleware 实现异步操作。

持久化存储

在前一篇文章中,我们使用 sessionStorage 来存储 session 数据。然而,sessionStorage 仅在当前浏览器窗口关闭之前有效,并且即使浏览器崩溃或重启,sessionStorage 也会被清除。如果希望我们的数据能够得到持久化的存储,我们需要使用 localStorage。

在 Redux 中使用 localStorage 可以使用 redux-persist 库来实现。redux-persist 可以将 Redux store 中的状态持久化到 localStorage、sessionStorage、内存和其他任何能够实现 "Storage "接口的存储介质。在这里,我们以 localStorage 为例。

首先,我们需要安装 redux-persist 和 redux-persist-exclude-filter 两个库:

--- ------- ------ ------------- ----------------------------

redux-persist-exclude-filter 可以选择性地黑名单/白名单状态的某些键来持久化存储。

接下来,在创建 store 的时候,我们需要将 reducer 和 persistReducer 两个函数组合起来:

------ - -------------- - ---- ----------------
------ ------- ---- ----------------------------

----- ------------- - -
  ---- -------
  --------
  ---------- ------------
--

----- ---------------- - ----------------------------- -------------

在上面的代码中,我们创建了一个名为 persistConfig 的配置对象,并将其传递给了 persistReducer 函数。persistConfig 对象中有以下属性:

  • key:用于 localStorage 存储的键的名称。
  • storage:指定要使用的存储对象(例如,localStorage、sessionStorage)。
  • whitelist:一个列表,它所包括的 reducer 状态将从 store 中持久化,其它状态将被忽略。

现在,我们已经成功地将 Redux store 中的状态持久化到本地存储中了。

Thunk middleware

我们之前所编写的 Redux action 都是同步的。在某些情况下,我们需要执行异步 action,例如读取 API 数据、异步转换数据等等。这时,我们需要使用 Redux 中间件,最常用的 Redux 中间件之一是 Thunk。

Thunk 已经成为了 Redux 官方提供的一个中间件,用于处理异步操作。Thunk 中间件可以让 action 创建函数先不返回一个 action 对象,而是返回一个函数。这个函数接收 dispatch 方法作为参数,然后异步执行后再 dispatch 最终的 action 对象。

下面是一个简单的 Thunk 中间件示例:

-------- ------------ -
  ------ ---------- -- -
    -------------------------
    ------ -------------------
      ---------------- -- ----------------
      ------------ -- ------------------------------
  --
-

在上面的代码中,fetchPosts 函数返回了一个函数,该函数接收 dispatch 方法作为其参数,然后异步获取 API 数据,在得到数据后使用 dispatch 方法分发一个 action 对象。

在 ActionCreator 中间件代码示例中,我们可以调用 HttpClinet Api 完成注销session操作,如果注销成功则更新 Redux store 中的 session 状态,并将更新的状态持久化存储到 localStorage 中。

------ - ----------- - ---- --------------

------ ---------- ---- -----------------------

------ - --------- - ---- -----------
------ - --------- ------------- ------------------ - ---- ----------

------ ----- ------- - --- ------------
  -----
  ----------
  --------
  ------------------
- -- ----- ---------- -- -
  --- -
    ----- --------------------------
    ----------
      ----- ---------
    ---
  - ----- ------- -
    ----------
      ----- ---------
    ---
  -
--

------ ----- ------------ - --- ------------------ -- --
  ----- ---------
---

我们也可以在主页中编写一个页面展示用户登录信息和一个注销按钮,当用户点击注销按钮时,异步触发 signOut 管理员异步 dispatch action 根据 httpClinet Api 完成操作。

结论

在这篇文章中,我们更深入地学习了如何使用 redux-persist 库将 Redux store 中的状态持久化到 localStorage 中,以及如何在 Redux 中使用 Thunk 中间件处理异步操作。这些技术可以帮助我们更加灵活和可靠地管理 React 项目中的 session localStorage 数据。希望这篇文章对于初学者对于 Redux 数据处理以及 Thunk异步数据流程的深入认知有所帮助。

示例代码可以在 https://github.com/DemoMacro/react-redux-session-example/tree/redux-persist-refactor参考。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6714c5e1ad1e889fe215be63


猜你喜欢

  • let 和 const 在 ECMAScript 2018 中的新特性

    随着 ECMAScript 2018 标准的发布,let 和 const 关键字又有了新的特性。在本文中,我们将介绍这些新的特性,并探讨它们对于前端开发的学习和实践的指导意义。

    22 天前
  • 实际案例: 使用 Express.js 和 React 构建实时电子商务应用

    前言 在当今数字化的世界里,一流的电子商务应用程序已经成为企业获得成功的必要条件。如今,电子商务应用程序已经涵盖了从购物和支付到商品推荐和客户服务等所有领域。本文将详细讨论如何使用 Express.j...

    22 天前
  • 解决 GraphQL 查询超时的正确姿势

    GraphQL 是一种查询语言,用于 API 的查询和变更请求。随着越来越多的应用程序使用 GraphQL 作为其 API 层,处理超时是一个重要的问题。在本文中,我们将介绍 GraphQL 查询超时...

    22 天前
  • 用 Headless CMS 快速构建应用:GraphCMS 的典型应用场景

    随着互联网技术的快速发展,越来越多的企业和个人开始将注意力转移到 Web 应用程序的开发上。然而,对于前端开发人员来说,搭建完整的 Web 并不容易。幸运的是,有一个称为 Headless CMS 的...

    22 天前
  • SSE 交互中可能遇到的 UI 问题及解决方案

    概述 Server-Sent Events (SSE) 是一种实现服务器向浏览器主动推送数据的技术,常用于实时通知和数据更新等场景。在前端中,SSE 的主要体现在 EventSource 对象的使用上...

    22 天前
  • 如何解决响应式设计中的不兼容问题

    在现代化的网站中,响应式设计已经成为了不可避免的趋势。然而,在实际应用中,我们经常会遇到许多不兼容的问题,这些问题使得网站在移动设备上呈现出不一致的效果,影响了用户体验和排名。

    22 天前
  • ES7 引入了 Array.prototype.fill 方法,让你快速填充数组

    #ES7 Array.prototype.fill 方法详解 ES7的Array.prototype.fill 方法为开发者提供了一种快速填充数组的方式。该方法能够在一个数组中填充给定的值,无需对数组...

    22 天前
  • 避免 TypeScript 中的 this 陷阱

    在 TypeScript 中,this 的使用经常会使开发者陷入困境,导致调试成本增加和生产力下降。如果不正确地使用 this,代码的可维护性和可读性也会受到影响。

    22 天前
  • 前端代码检查工具 ——ESLint 入门指南

    作为前端工程师,我们编写的代码应该是高质量,易读易维护的。然而,在大型项目中,代码规范可能会变得非常复杂,而手动维护代码规范显然是不可行的。幸好,有一种强大的代码检查工具,它可以帮助我们解决这个问题—...

    22 天前
  • Android Material Design 中实现弹性 ViewPager

    在 Android Material Design 中实现弹性 ViewPager 对于优化用户体验来说十分重要。当用户滑动页面时,弹性 ViewPager 可以提供一种连贯而流畅的过渡效果,从而增强...

    22 天前
  • Redis 缓存穿透问题与解决方法

    随着互联网应用规模的不断扩大,性能问题愈加突出,缓存的作用越来越不可忽视。Redis 作为当前主流的内存缓存工具,使用广泛,然而 Redis 在缓存穿透问题上较为薄弱,接下来我们将从这个角度出发,深入...

    22 天前
  • 在 SPA 应用中使用 Vue.js 的最佳实践教程

    Vue.js 是一个流行的 JavaScript 框架,广泛用于构建现代的单页应用程序 (SPA)。在本文中,我们将分享一些在 SPA 应用中使用 Vue.js 的最佳实践,包括组件化、状态管理、路由...

    22 天前
  • Kubernetes 网络故障排错指南

    Kubernetes 是一种开源的容器编排平台,用于管理容器化应用程序的部署、扩展和运行。但是,网络故障经常会影响 Kubernetes 集群的稳定性。在本文中,我们将介绍一些常见的 Kubernet...

    22 天前
  • 理解 Fastify 框架中的文档注释

    前言 Fastify 是一个用于构建高效 Web 服务的 Node.js 框架。相比于其他框架,Fastify 采用了一些独特的优化方式,使其在性能方面表现出色。除此之外,Fastify 还提供了一些...

    22 天前
  • Tailwind 学习笔记:用实例了解不同的表格样式

    前言 Tailwind 是一种基于类的 CSS 框架,类名重用性高,使用灵活,方便快捷。在 Tailwind 中,提供了很多实用的类,可以帮助我们快速构建出美观的表格样式。

    22 天前
  • 在 Vue.js 应用中使用 Nuxt.js 进行服务端渲染

    在 Vue.js 应用中使用 Nuxt.js 进行服务端渲染 随着 JavaScript 技术的不断发展,客户端应用已成为 Web 应用开发的标准,而 Vue.js 作为当下最火的前端框架之一,已经被...

    22 天前
  • 处理 Jest 测试期间的 chrome 无头浏览器超时错误

    在进行前端自动化测试时,我们通常会使用 Jest 和 chrome 无头浏览器来模拟用户行为,进行 UI 测试。然而,在测试期间,很容易遇到一些超时错误的问题,尤其是在使用 chrome 无头浏览器时...

    22 天前
  • React Native 中如何实现打开应用就强制竖屏

    在移动应用开发中,强制用户界面竖屏是一种普遍使用的技术。在 React Native 中,我们可以通过修改应用的配置文件实现强制竖屏。本文将带您详细了解如何在 React Native 中实现打开应用...

    22 天前
  • Benchmark 性能测试与优化实践

    在现代 Web 开发中,网站性能优化扮演着至关重要的角色。因为高性能的网站可以提高用户的体验并达到更好的转化率。而如何保证性能,测试性能,以及优化网站的性能是每个前端工程师必须掌握的技能。

    22 天前
  • React 和 Redux 优化:使用 React 性能工具

    React 是一个流行的 JavaScript 库,用于构建 Web 应用程序的用户界面。Redux 则是一个状态管理库,它提供了一个可预测的应用程序状态管理解决方案。

    22 天前

相关推荐

    暂无文章