Redux 中使用 TypeScript：实战教程

Redux 是一种用于 JavaScript 应用程序的可预测状态容器，它可以帮助你管理应用程序的状态，并使其易于调试和维护。而 TypeScript 是一个强类型的 JavaScript 超集，它可以使开发者在编写代码时发现错误，并提供更好的编辑器支持。将 Redux 和 TypeScript 结合使用，可以使代码更加稳健和可维护。

本教程将带领你创建一个使用 Redux 和 TypeScript 的实时搜索应用程序。在这个过程中，你将学习如何配置 Redux 和 TypeScript，如何编写符合类型约束的 Redux reducers 和 actions，以及如何在 React 中使用这些 reducers 和 actions。

1. 设置项目环境

在开始之前，我们需要设置项目环境。我们将使用 create-react-app 来快速搭建项目。

首先，打开终端并输入以下命令：

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

这个命令将使用 create-react-app 创建一个名为 redux-typescript-tutorial 的项目，并使用 TypeScript 作为模板。

等待命令完成后，进入项目文件夹：

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

2. 配置 Redux

我们将使用 redux 和 react-redux 库来管理应用程序的状态。运行以下命令来安装它们：

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

接下来，我们需要创建一个 Redux store。在 src 文件夹下创建一个新文件夹 store。在这个文件夹下，创建一个新文件 index.ts。在这个文件中，我们将初始化 Redux store 并导出它。

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

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

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

我们这里使用 rootReducer 作为我们的应用程序的 reducer，下一步我们将创建它。

在 store 文件夹下，创建一个新文件夹 reducers。在这个文件夹下，创建一个新文件 index.ts。这个文件将包含我们的应用程序的 reducer。

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

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

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

我们现在已经初始化了 Redux store 并创建了一个根 reducer。接下来，我们将在 reducers 文件夹下添加一些 reducer。

在 reducers 文件夹下，创建一个新文件 search.ts。这个文件将包含我们的搜索 reducer。

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

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

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

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

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

在这个 reducer 中，我们定义了一个 SearchState 接口来描述应用程序的搜索状态，包含一个名为 query 的字符串属性。在 reducer 中，我们返回一个新的搜索状态对象，其中 query 属性设置为 action 的 payload 值。

接下来，我们需要将这个 reducer 添加到我们的根 reducer 中。回到 reducers/index.ts 文件，添加以下代码：

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

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

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

现在我们的根 reducer 包含了一个 search reducer。我们已经完成了 Redux 的配置。

3. 编写 actions

接下来，我们需要编写 actions，这些 actions 用于修改 Redux store 中的状态。我们使用 TypeScript 来确保我们的 actions 符合特定的类型模式。

在 store 文件夹下，创建一个新文件夹 actions。在这个文件夹下，创建一个新文件 search.ts。这个文件包含一些定义搜索 action 的 TypeScript 类型和创造这些 action 的函数。

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

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

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

在这个文件中，我们定义了一个名为 UpdateQueryAction 的 TypeScript 接口，用于描述更新搜索查询的 action。我们还定义了一个 SearchAction 类型，它是定义在我们的应用程序中可以派发的所有 actions 的联合类型。最后，我们定义了一个名为 updateQuery 的函数，它返回一个 UpdateQueryAction 对象，用于将新的搜索查询更新到 Redux store 中。

现在我们已经完成了 actions 的编写。

4. 在 React 中使用 Redux

现在我们已经完成了 Redux 的配置和 actions 的编写，我们可以开始在 React 组件中使用 Redux 了。

在 src 文件夹下，创建一个新文件夹 components。在这个文件夹下，创建一个新文件 SearchInput.tsx。这个组件用于渲染一个包含搜索输入框的组件，并将用户输入的搜索查询更新到 Redux store 中。

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

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

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

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

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

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

在组件中，我们使用 React.useState 以及 React.useDispatch hook 来更新组件的状态和发送更新 Redux store 的 action。我们为输入框添加了一个 onChange 事件处理程序来更新查询，并在 Search 按钮点击时调用 updateQuery action。

现在，我们已经完成了在 React 组件中使用 Redux 的全部配置。

5. 完整代码

下面是我们的完整代码，包含上面提到的所有文件和代码：

src/store/actions/search.ts

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

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

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

src/store/reducers/search.ts

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

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

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

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

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

src/store/reducers/index.ts

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

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

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

src/store/index.ts

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

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

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

src/components/SearchInput.tsx

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

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

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

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

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

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

6. 结论

在本教程中，我们学习了如何在 Redux 中使用 TypeScript，并使用一个实时搜索应用程序作为示例来演示如何编写类型安全的 reducers 和 actions。我们还了解了如何在 React 组件中使用 Redux，以及如何将用户输入更新到 Redux store 中。

通过将 Redux 和 TypeScript 结合使用，我们可以确保应用程序的状态始终符合类型约束，并且代码更加健壮和易于维护。我希望这个教程能够帮助你更好地理解如何在 TypeScript 中使用 Redux，以及如何将 Redux 和 TypeScript 结合使用来构建具有类型安全的 React 应用程序。

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

阅读全文

猜你喜欢

  • Mocha 测试套件执行顺序问题的解决方法

    Mocha 是一个流行的 JavaScript 测试框架，它提供了强大的 API 和丰富的功能，方便我们编写和执行各种类型的测试。但是，在使用 Mocha 进行测试时，可能会遇到测试套件不按照我们期望...

    3 天前
  • Express.js 中如何处理 URL 查询参数

    Express.js 是 Node.js 平台下一个极为流行的 Web 框架，它提供了快速、简便的方式来创建服务器和处理 HTTP 请求和响应。URL 查询参数是一个非常常见和有用的功能， 本文将介绍...

    3 天前
  • 使用 Headless CMS 支持无线远程控制的简单教程

    在现今互联网时代，越来越多的网站和应用程序开始采用 Headless CMS 技术，它可以将内容与界面分离，从而支持前端开发人员通过 Rest API 获取数据，并提供远程控制的能力。

    3 天前
  • Koa 中使用 Passport 进行 OAuth 认证的实现方法

    在现在的 Web 开发领域中，越来越多的应用都会支持 OAuth 认证。OAuth 是一种开放标准，允许用户授权第三方应用访问其数据，而无需向第三方应用共享其密码。

    3 天前
  • Sequelize 中的事务并发问题及解决

    Sequelize 是一个基于 Node.js 的 ORM 库，支持多种数据库，包括 MySQL、PostgreSQL 等。在使用 Sequelize 进行数据库操作时，事务是常见的操作之一。

    3 天前
  • 在 Vue CLI 3 项目中，正确使用 ESLint 进行代码规范检查

    ESLint 是一个代码检查工具，可用于检查 JavaScript 代码中的潜在错误和代码风格问题。在 Vue CLI 3 项目中，ESLint 默认已经启用，但是可能需要进行一些配置，以确保它可以正...

    3 天前
  • 如何在响应式设计中优化表格布局

    在响应式设计中，表格布局一直是一个很大的挑战。因为表格本身是一种非常静态的布局方式，如果不加以优化，就很难适应不同的屏幕尺寸。本文将介绍如何在响应式设计中优化表格布局，以实现更好的用户体验。

    3 天前
  • 为什么 Jest 测试失败了？

    Jest 是一个非常流行的 JavaScript 测试框架，许多前端开发人员都喜欢使用它进行单元测试、集成测试甚至端到端测试。但是，有时你可能会看到 Jest 测试失败了，甚至找不到问题出在哪里，这是...

    3 天前
  • 如何使用ES12中的Temporal API处理日期和时间？

    随着时间和日期处理在现代Web开发中的重要性的增加，ECMAScript在其最新版本中引入了Temporal API作为日期和时间的新方式。Temporal API为开发人员提供了一种更简单、更直观的...

    3 天前
  • Chai 如何对对象进行深度相等性测试

    在前端开发中，测试是一个非常重要的环节。对于对象的深度相等性测试是一项非常常见的测试任务。Mocha 是一个非常受欢迎的 JavaScript 测试框架，而 Chai 是一个用于编写断言库的插件，是在...

    3 天前
  • 使用 Fastify 的 “生产者 - 消费者” 模式构建轻松高效的任务队列系统

    随着前端应用的规模不断扩大，我们发布一个新的版本或进行一次复杂的操作可能需要消耗非常长的时间。通常情况下，我们不希望阻塞用户交互，并且需要在后台处理任务。在这种情况下，任务队列系统就能很好地帮助我们解...

    3 天前
  • 探索 Express.js 应用的性能瓶颈，优化方法汇总

    在构建大型 Web 应用程序中，Express.js 是开发人员最常用的框架之一。但是，当应用程序规模变大时，性能问题就会变得更加突出。这篇文章将带您深入探索 Express.js 应用程序可能遇到的...

    3 天前
  • Angular 应用 SEO 优化实践指南

    在设计和开发现代 Web 应用时，前端框架（例如 Angular、React、Vue 等）变得越来越受欢迎。这些框架可以用来构建单页应用程序或其他交互式应用程序，但是它们在 SEO 中的表现不太友好。

    3 天前
  • 用 Serverless 快速构建分布式后端服务

    Serverless 架构是一种基于云计算的应用构建方法，它使开发人员可以在不需要管理服务器的情况下构建和运行应用程序。在 Serverless 架构中，应用程序是以函数的方式编写的，部署和运行在无服...

    3 天前
  • 在使用 Deno 开发时遇到了 Module Not Found 错误，怎么解决？

    在使用 Deno 进行前端开发时，我们可能会遇到 Module Not Found 错误，这个错误发生的原因是因为 Deno 可能找不到某个模块或文件。 1. 错误的原因 模块或文件不存在 模块或文...

    3 天前
  • 如何在 Redux 中处理分页及数据加载

    在前端开发中，数据的分页及加载是一个经常需要面对的问题。Redux 作为前端应用状态管理器，可以很好地协调数据的传输和交互。在此，我们将会深入介绍如何在 Redux 中处理分页及数据加载，并提供一些示...

    3 天前
  • Enzyme 如何测试 React 组件中的表单数据

    在 React 应用程序的开发过程中，表单数据是非常常见的。为了保证应用程序的质量，我们需要对表单数据进行测试。Enzyme 是一个用于 React 应用程序的 JavaScript 测试工具，它提供...

    3 天前
  • 利用 REM 实现响应式字体大小控制的技巧

    在响应式设计中，如果你想要您的网站或应用程序能够自适应不同屏幕大小和设备类型，那么您需要能够控制文本的大小以适应各种视图。 在本文中，我们将介绍如何使用 REM 来自适应文本大小。

    3 天前
  • Docker 容器中运行 Oracle 数据库的方法和技巧

    介绍 Oracle 数据库是企业级数据库软件，它提供了完整且兼容的 SQL 数据库服务。Oracle 数据库的使用广泛，拥有天然优势，具有强大的大数据和高安全性特点。

    3 天前
  • 使用 Node.js 和 Express 构建 RESTful API 的最佳实践

    RESTful API 已经成为现代 Web 应用的标配，并且 Node.js 和 Express 正成为开发这类 API 的首选技术。尽管这两个工具的使用非常简单，但是在构建 RESTful API...

    3 天前

相关推荐

    暂无文章