看图学 Redux

面试官：小伙子，你的代码为什么这么丝滑？

随着 Web 应用程序日益复杂，如何管理数据和状态成为了一种非常重要的挑战。Redux 是一个独立的状态管理库，它让数据和状态的管理变得简单和可控。

在本文中，我们将通过图示的方式来学习 Redux 的核心概念，通过深入的示例代码来了解如何使用 Redux 来管理状态。

Redux 基础概念

Store

Store 是一个包含应用程序状态的对象。它是 Redux 中的核心概念，用于存储应用程序中的全部状态。

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

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

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

Action

Action 是一个简单的 JavaScript 对象，表示一个特定应用程序中的事件。

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

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

Reducer

Reducer 是一个纯函数，接受先前的状态和当前的操作，返回修改后的状态。

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

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

Redux 工作方式

Dispatch

Dispatch 是一个将 Action 分发给 Reducer 的方法。

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

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

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

Subscribe

Subscribe 是一个注册回调函数，用于在 Store 中的状态发生变化时进行通知。它可以用于更新 UI 或执行其他操作。

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

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

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

Redux 示例代码

准备工作

在开始构建示例之前，请确保您已安装以下软件包：

  • react：构建用户界面的 JavaScript 库。
  • react-dom：用于将 React 渲染到 HTML。
  • redux：实现状态管理的 JavaScript 库。
  • react-redux：将 React 与 Redux 集成的 JavaScript 库。

示例一：计数器应用

这是一个简单的示例，其中有两个按钮（加号和减号），用于增加和减少一个计数器的值。使用 Redux 之前，我们将在组件之间通过 props 和回调函数传递状态。

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

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

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

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

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

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

现在，让我们使用 Redux 重新实现计数器应用。我们将在 Store 中存储计数器的值，使用 Reducer 来管理它，通过 actions 来分发状态，使用 react-redux 将其集成到组件中。此外，我们还将使用 TypeScript 来增强代码的类型安全性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例二：代办事项应用

这是一个更复杂的示例，其中包含一个可以输入新任务的输入框和一个任务列表。用户可以添加和删除任务。使用 Redux 之前，我们将在组件之间通过 props 和回调函数传递任务列表和状态。

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

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

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

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

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

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

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

现在，让我们使用 Redux 重新实现代办事项应用。我们将在 Store 中存储任务列表，使用 Reducer 来管理它，通过 actions 来分发状态，使用 react-redux 将其集成到组件中。此外，我们还将使用 TypeScript 来增强代码的类型安全性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

初学者常见问题

  • Q: Redux 是否必须使用 TypeScript？ A: 不。Redux 可以与 JavaScript 一起使用。使用 TypeScript 可以增强代码的类型安全性。
  • Q: Redux 是否可与 React 以外的框架一起使用？ A: 是的。Redux 可以与任何 JavaScript 应用程序一起使用。
  • Q: Redux 是否解决了其他状态管理库无法解决的问题？ A: 不完全。Redux 并不是万能的，它提供了一种可维护的状态管理模式。在某些情况下，可能需要使用其他库或实现自己的状态管理解决方案。

结论

Redux 是一个非常强大的状态管理库，可以让数据和状态的管理变得简单和可控。本文通过图示的方式深入浅出地介绍了 Redux 的核心概念，并提供了详细的示例代码。希望本文可以帮助您更好地理解和使用 Redux。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670b57aad91dce0dc8899b37

阅读全文

猜你喜欢

  • 使用 Deno 和 Oak 框架创建 Web 应用程序

    简介 Deno 是一个基于 V8 引擎的 JavaScript 和 TypeScript 运行时环境，它解决了 Node.js 中存在的一些问题。它包含一个更安全的默认环境，没有 npm 的全局安装，...

    9 天前
  • MongoDB 与 MySQL 比较优劣对比分析

    前端开发中，数据库是非常关键的一部分。而目前市面上比较流行的关系型数据库是 MySQL，而非关系型数据库则是 MongoDB。在选择数据库时，应该如何权衡它们的优劣呢？本文将对 MongoDB 与 M...

    9 天前
  • 如何在 Jest 测试套件中使用 Sinon.js

    前言 在前端开发中，我们经常需要使用测试工具来确保我们的代码能够正常地运行。在这些工具中，Jest 是一个非常流行的测试套件之一，而 Sinon.js 则是一个用于编写 JavaScript 测试的伪...

    9 天前
  • PWA 技术的本地存储之 Cookies 和 localStorage 的使用

    PWA（Progressive Web App）技术是一种新型的 Web 应用开发技术，能够将 Web 应用程序打造成类似于本地应用程序的体验。PWA 技术能够在浏览器中离线访问、支持推送通知、在主屏...

    9 天前
  • 如何构建自动化 Serverless 基础架构

    随着云计算和Serverless技术的发展，越来越多的企业开始采用Serverless架构为其业务提供服务。Serverless架构有很多优点，比如可扩展性、高可用性、灵活性、易于维护等。

    9 天前
  • 如何做到列宽自适应，实现 CSS Grid 网络布局

    CSS Grid 是一个强大的 CSS 布局系统，它允许我们轻松地创建各种复杂的布局。本文将介绍如何使用 CSS Grid 实现列宽自适应，应对不同屏幕宽度下的网页布局。

    9 天前
  • 使用 ES11 中的 WeakRefs API 增强内存管理

    随着前端应用变得越来越复杂和庞大，内存管理变得越来越重要。在这方面，ES11 中添加了一项强大的功能：WeakRefs API。它可以帮助开发者更好地管理内存，减少内存泄漏的风险。

    9 天前
  • 拥有数百个 Kubernetes 命名空间时如何优化？

    在使用 Kubernetes 运行大规模的应用程序时，分离和隔离不同的资源是非常重要的。而 Kubernetes 的命名空间就是一种重要的分离和隔离机制。命名空间可以让团队在同一个 Kubernete...

    9 天前
  • Cypress 自动化测试中的 API 测试

    Cypress 是一款流行的前端自动化测试框架，可以测试 Web 应用的各个方面。除了 UI 测试外，Cypress 也可以进行 API 测试。在本文中，将介绍如何使用 Cypress 进行 API ...

    9 天前
  • 如何避免 XSS 攻击？

    跨站脚本攻击（XSS）是一种常见的网络攻击，特别危险的是通过 JavaScript 代码注入到网页中，盗取用户的隐私信息，例如 cookie 和密码。在前端开发中，我们应该采取一些方法来防止这种类型的...

    9 天前
  • 如何正确使用 ES8 中新增的 Array.prototype.includes() 方法

    随着 JavaScript 开发在前端领域的广泛应用，ES8 中新增的 Array.prototype.includes() 方法在开发过程中也越来越受到关注。该方法可以返回一个布尔值，表示数组是否包...

    9 天前
  • CSS Reset 与框架的兼容性问题

    CSS Reset 是一种用于在网页浏览器间创建一致性的 CSS 规则集合。它在编写 CSS 样式表时允许您从空白状态开始构建，而不必考虑大多数浏览器的默认样式。然而，当我们想要将 CSS Reset...

    9 天前
  • AngularJS 中实现单页应用程序的五种最佳方法

    AngularJS 是一种强大而灵活的前端框架，尤其擅长开发单页应用程序（SPA）。在这篇文章中，我们将介绍 AngularJS 中实现 SPA 的五种最佳方法，并讲解每种方法的优劣以及实现的具体细节...

    9 天前
  • Chai 库中 expect 和 should 使用场景对比

    Chai 是一个流行的 JavaScript 断言库，常用于前端测试环境。它有三种断言风格：expect、should 和 assert。本文主要比较 expect 和 should 使用场景的不同，...

    9 天前
  • 如何在使用 Enzyme 测试 React 组件时模拟异步数据请求？

    在使用 React 进行前端开发时，我们常常需要使用异步数据请求来获取后端数据。而在测试 React 组件时，如何模拟异步数据请求来测试组件的正确性呢？这就需要用到 Enzyme，一个用于 React...

    9 天前
  • 如何使用 React 封装 Web Components

    在前端开发中，React 是目前最热门的 JavaScript 库之一。如果你熟悉 React，并且想要将其用于封装 Web Components，则本文将提供一些指导和示例。

    9 天前
  • PM2 之进程守护

    前言 现在，很多公司都会选择使用 PM2 来进行进程管理和守护。PM2 是一个强大的进程管理工具，可以方便地管理和监控你的 Node.js 应用程序。本文将介绍 PM2 的使用方法以及进程守护的实现。

    9 天前
  • 无障碍设计与 AR 技术的结合 —— 探索未来的视觉体验

    随着 AR 技术不断发展，我们已经看到了如此多优秀的 AR 应用，它们给我们带来了不同凡响的体验，使得我们对于未来视觉体验有了更加丰富的想象。然而，即使 AR 技术可以为用户带来更加逼真的体验，但如果...

    9 天前
  • Next.js 与 Firebase 集成指南：让您的应用程序更快、更高效

    在前端开发中，我们经常需要使用各种工具和技术来保证我们的应用程序能够运行得更快、更高效。在这方面，Next.js 和 Firebase 无疑是相当值得使用的两个工具。

    9 天前
  • React Hooks 与 Redux：配合构建更好的应用

    React Hooks 和 Redux 是两个前端领域非常流行且不可缺少的技术，它们的组合使用可以大幅提高应用的可维护性、可拓展性和可读性。本文将介绍如何使用 React Hooks 和 Redux ...

    9 天前

相关推荐

    暂无文章