Redux 代码管理的最佳实践

Redux 代码管理的最佳实践

当我们在开发前端应用程序时，每个开发者都希望能够编写出易于维护和扩展的代码。Redux 可以帮助我们有效管理应用的状态，但如何使用它并没有一个明确的“正确”答案。在本文中，我们将介绍一些最佳实践，以帮助你编写更好的 Redux 代码。

  1. 分离数据和逻辑

Redux 的核心是一个存储在一个唯一的 Store 对象中的状态。但是，Redux 不仅仅是一个状态管理库。它的设计理念是将数据和逻辑分离开来，让你的状态成为你应用程序的“单一真相”。

在实践中，这意味着将所有逻辑操作与状态分离，并将其转移到 Redux 的 action 和 reducer 中。

首先，让我们看看一个典型的组件方法，以处理提交表单中的数据：

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

上面的代码展示了一种很常见的应用场景 - 用户提交表单并向后端发送数据。然而，这个方法隐含了很多状态和逻辑操作：

  • 从组件的 state 中提取表单数据。
  • 调用 API 方法以发送数据到服务器。
  • 处理服务器响应，调用 onLogin 动作。

所有这些操作都应该在 Redux 的 action 和 reducer 中执行。下面是由 Redux 管理表单数据和提交逻辑的一个示例：

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

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

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

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

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

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

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

这里我们将表单数据作为 action，而不是组件状态进行处理。使用 setLoginForm（）方法将表单数据传输到 reducers 内，而不是将其作为组件 props 进行传递。我们还发起了一个所谓的 “thunk”，使用异步代码来处理登录操作（dispatch loginRequest 方法，处理服务器响应，dispatch loginSuccess 或 loginFailure 方法），而不是将其放在组件中处理。

  1. 使用 Redux Toolkit

Redux Toolkit 是一个由 Redux 核心团队开发的官方工具集，它可以生成大量样板代码，提供可重用的实用程序函数，以及避免常见的错误和陷阱的方式。

下面是使用 Redux Toolkit 重写上面的示例代码：

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

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

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

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

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

可以看到，使用 Redux Toolkit 可以大大简化 Redux 的模板代码，并提供了更多的灵活性。我们在 createStore() 函数中使用 createSlice() 方法来创建一个 Redux slice，而不是手动定义 actions 和 reducer。在我们的组件中，我们只需调用由 createSlice() 方法生成的 actions，而不管其他细节。

  1. 小心使用 Redux 中间件

Redux 中间件是一个操作 dispatch() 方法的函数，通常用于处理异步事件、记录、分析和日志记录。虽然中间件对于管理复杂的应用程序非常有用，但如果使用不当，它们也会带来大量的复杂性和不必要的开销。

常见的 Redux 中间件包括 Redux Thunk、Redux Saga、Redux Observable、Redux Promise 等。像 Redux Thunk 这样的中间件可以使我们轻松创建异步 action creator，而 Redux Logger 可以记录在控制台中执行的所有操作。

然而，使用过多的中间件可能会导致应用程序变慢，并增加开销和复杂性。在构建应用程序时，请考虑中间件的数量和功能，并尽可能减少其数量。

  1. 保持组件与 Redux 解耦

在应用程序中使用 Redux 时，我们通常通过将 Store 分配给组件属性的方式进行数据传递。但是，这意味着我们的组件与 Redux 高度耦合，如果 Store 中的状态发生变化，我们的组件必须进行更新。

为了减少这种耦合性，我们可以使用 React Context 和 React Redux 等库来封装 Redux 实现，以便将其与组件分离。这个库会为我们处理将 Store 分配给子组件，将 action creators 和状态映射到组件 props 等操作。

下面是一个使用 React Redux 的例子：

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

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

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

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

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

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

在这里，我们使用了 connect() 方法，将 Store 的状态和 action creators 分配给我们的 LoginForm 组件。connect() 方法的第一个参数，即 mapStateToProps() 函数，将 Store 中的状态映射到组件的 props 上。我们可以使用 mapDispatchToProps() 函数来将 action creators 与 Login 组件分配给同样的 props。

结论

Redux 是一个强大的状态管理库，可以用来有效地管理应用程序的状态。但是，为了编写干净、易于维护的代码，我们需要注意一些最佳实践。

在应用 Redux 中，我们需要学会正确分离数据和逻辑，使用 Redux Toolkit 进行代码生成和简化，小心使用 Redux 中间件，并保持组件与 Redux 解耦。这些最佳实践可以帮助我们编写更好的 Redux 代码，从而使我们的应用程序更加易于维护和扩展。

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

阅读全文

猜你喜欢

  • 在 React 应用中使用 Server-Sent Events

    随着 Web 应用程序需求的增长，需要实时数据推送的应用程序也越来越普遍。传统的轮询和 WebSocket 等协议的实现需要复杂的设置和处理，而 Server-Sent Events (SSE) 提供...

    2 个月前
  • ES12 中的 for-await-of 循环详解

    在 ES12 中，引入了 for-await-of 循环，以便更方便地处理异步迭代器。本文将详细介绍 for-await-of 循环的使用和特性。 异步迭代器和 Iterable/Iterator 在...

    2 个月前
  • ES10 的 Promise.all() 和 Promise.race()

    在前端开发中，异步操作是一个不可避免的问题。为了更好地处理异步操作，JavaScript提供了Promise，它能够处理异步请求，我们可以通过then链式地进行处理。

    2 个月前
  • 如何优化 Lambda 函数运行性能

    在服务器端架构中，AWS Lambda 是一个非常有用的服务。它可以管理应用程序的服务器资源，帮助开发者将重心放在应用程序的业务逻辑和后端服务之上。如果你使用 AWS Lambda 来运行你的应用程序...

    2 个月前
  • 如何在 Karma 单元测试中使用 Chai 和 Mocha

    如何在 Karma 单元测试中使用 Chai 和 Mocha 在前端开发中，单元测试是非常重要的，它可以确保代码的质量和稳定性。Karma 是一个流行的 JavaScript 测试运行器，而 Chai...

    2 个月前
  • RESTful API 中使用 Swagger 的好处

    Swagger 是一个流行的 API 开发工具，它提供了一种方便的方式来设计、编写和测试 RESTful API。在本文中，我们将探讨 RESTful API 中使用 Swagger 带来的好处、如何...

    2 个月前
  • MongoDB 的聚合查询实现和应用场景

    前言 MongoDB 是一种非关系型数据库，对于前端开发来说，它具有很好的适用性。在实际应用中，我们通常需要从数据库中获取数据，而聚合查询则是一种非常常用的获取数据的方式。

    2 个月前
  • C++ 容器类性能优化探究

    介绍 C++ 是一门强大的编程语言，拥有多个不同的容器类型，比如数组、向量、列表、映射等等。在使用容器时，我们要尽可能地优化它们的性能，以确保程序的高效运行并减少资源消耗。

    2 个月前
  • RxJS 的 mat 冻结 bug 及其解决方案

    背景 在前端开发中，RxJS 的应用越来越广泛，并且在一些大型项目中，RxJS 已成为主要的状态管理工具。在使用 RxJS 过程中，有时会遇到 mat 冻结的问题。

    2 个月前
  • Jest 测试框架：如何测试 RESTful API

    Jest 是一个流行的 JavaScript 测试框架，它是由 Facebook 开发并维护的。它支持测试 React 组件、Node.js 应用程序和 RESTful API 等。

    2 个月前
  • Fastify 实现 Restful API 的最佳实践

    Fastify 是一个快速、低开销并且可扩展的 Node.js Web 框架，可以帮助开发者快速构建高性能的 RESTful API 服务。本文将介绍如何使用 Fastify 实现 Restful A...

    2 个月前
  • Node.js 运行错误：Error: Cannot find module 'my-module' 解决方法

    很多前端开发者在使用 Node.js 时，可能会遇到如下错误信息： ------ ------ ---- ------ -----------这个错误提示信息表示 Node.js 在运行时找不到指定的...

    2 个月前
  • Express.js 中 Sequelize 自定义字段别名的使用

    Sequelize 是一种基于 Node.js 的 ORM 框架，可以让开发者更加方便地操作数据库。在实际项目开发中，我们往往需要自定义字段别名，以满足业务需求。本文将介绍在 Express.js 中...

    2 个月前
  • 在 Deno 中使用第三方代码

    什么是 Deno？ 大家好，今天我们来谈论一下前端领域新兴的技术：Deno。Deno是一种基于V8引擎构建的安全的JavaScript和TypeScript运行时环境。

    2 个月前
  • 如何利用 GraphQL 简化前端开发

    GraphQL 是一种能够简化前端开发的 API 查询语言，通过它我们可以只请求需要的数据，并且可以在同一次 API 请求中获取到多个资源的数据。它也可以解决 RESTful API 中常见的问题，如...

    2 个月前
  • 无障碍设计：必知必学的八个基础知识

    随着数字产品的普及，越来越多的人使用电脑和移动设备进行日常生活和工作。但是，却有一个很容易被忽视的问题：许多人面临着使用数字产品的障碍，这包括老年人、残疾人以及那些视力不佳、听力受损或者手部行动不便的...

    2 个月前
  • ES11 中的一些改进

    随着JavaScript的发展，它不断地扩展和改进。ES11（也称作ES2020）是最新的JavaScript版本，也带来了一些有用的新功能和改进。在这篇文章中，我们将研究ES11中的一些特性，并了解...

    2 个月前
  • 使用 Enzyme 和 Jest 进行快速测试的最佳实践

    在前端开发中，测试是不可或缺的一部分。使用测试可以保证代码质量，减少错误和 bug 的数量。在测试前端代码时，Enzyme 和 Jest 是两个非常有用的工具。Enzyme 用于测试 React 组件...

    2 个月前
  • Headless CMS 与 TypeScript，高效处理前端数据

    随着前端开发的快速发展和应用场景的不断扩展，前端开发人员需要处理越来越多的数据。处理这些数据的方式有很多种，其中 Headless CMS 和 TypeScript 等技术可以帮助开发人员更高效地处理...

    2 个月前
  • RxJS 中的操作符 tap

    什么是 RxJS？ RxJS 是 ReactiveX 的 JavaScript 实现，它是一种基于异步数据流的编程范式。这意味着 RxJS 可以用来处理来自多个来源的事件流，并且具有方便的组合和变换这...

    2 个月前

相关推荐

    暂无文章