React 和 Redux 是目前前端开发中最流行的技术框架之一。React 负责构建网页 UI，而 Redux 则负责构建可复用和可扩展的状态管理。本文将介绍如何结合使用 React 和 Redux，以及其开发 Web App 的实践。
基础知识
在开始实践之前，首先需要了解一些基础知识。
React
React 是由 Facebook 开发并维护的一款前端框架，用于构建大型且高性能的单页应用程序（SPA）。它使用声明性组件化的方式，使得代码易于理解和维护。React 采用了虚拟 DOM 技术，可以最小化 DOM 操作，加快页面渲染速度。
Redux
Redux 是一个 JavaScript 应用程序状态容器，可用于管理 React 应用中的状态。通过 Redux，您可以在应用程序中全局维护一个存储状态的容器。Redux 使得状态管理更为简单和可预测，并帮助开发者轻松编写可重用和可扩展的代码。
ES6
React 和 Redux 适用于 ES6，该语言提供了更多的语言功能，包括箭头函数、模板字面量、解构赋值、扩展操作符等等。这些语言功能使得代码更简洁且易于阅读。
实践步骤
接下来我们将通过一个实例来演示如何使用 React 和 Redux 开发 Web App。我们将创建一个简单的代办事项列表，用户可以添加和删除代办事项。
步骤 1：创建 React 应用
我们可以使用 create-react-app 工具来创建一个 React 应用。在终端中使用以下命令：
npx create-react-app todo-app
该命令将在当前目录中创建一个名为 todo-app 的 React 项目。
步骤 2：安装 Redux
在项目中安装 Redux：
npm install redux react-redux
我们还需要一个 redux-thunk 中间件来处理异步的 action。
npm install redux-thunk
步骤 3：创建 Redux Store
在 src 目录下创建一个名为 store.js 的文件，用于创建 Redux 的 store。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ ----------- ---- ------------ ----- ----- - ------------ ------------ ---------------------- - ------ ------- -----
其中 rootReducer 为根 reducer，我们将在下一步创建。
步骤 4：创建 Reducer
在 src 目录下创建一个名为 reducers 的文件夹，并在其中创建一个名为 index.js 的文件。
-- -------------------- ---- -------
------ - --------------- - ---- -------
----- ------------ - -
------ --
-
-------- ----------- - ------------------- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- -----------
-
-
---- --------------
------ ----------------- -- ------- --- ----------
--------
------ -----
-
-
----- ----------- - -----------------
-----
--
------ ------- -----------我们定义了一个名为 todos 的 Reducer，用于处理添加和删除代办事项的 action。
步骤 5：创建 Action
在 src 目录下创建一个名为 actions.js 的文件。
-- -------------------- ---- ------- --- ---------- - - ------ ----- ------- - ---- -- -- ----- ----------- --- ------------- ---- -- ------ ----- ---------- - -- -- -- ----- -------------- -- --
我们定义了两个 action：addTodo 和 deleteTodo。
步骤 6：创建组件
我们将创建三个组件：
- TodoList：渲染代办事项列表。
- TodoItem：表示单个代办事项。
- AddTodo：用于添加待办事项。
在 src 目录下创建名为 components 的文件夹，并在其中创建这三个组件。
-- -------------------- ---- -------
-- -----------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - ---------- - ---- ------------
----- -------- - -- ------ -------- -- -- -
----
--------------- -- -
--- --------------
-----------
------- ----------- -- ------------------------------------------
-----
---
-----
-
----- --------------- - ----- -- --
------ -----------
--
------ ------- ----------------------------------// TodoItem.js
import React from 'react'
const TodoItem = ({ text }) => (
<div>{text}</div>
)
export default TodoItem-- -------------------- ---- -------
-- ----------
------ ------ - -------- - ---- -------
------ - ------- - ---- -------------
------ - ------- - ---- ------------
----- ------- - -- -------- -- -- -
----- ------------ -------------- - ------------
----- ------------ - - -- -
------------------
-- -------------------- -
------
-
-----------------------------
-----------------
-
------ -
----- ------------------------
------ ----------- ------------------ ----------- -- ------------------------------ --
------- -------------------------
-------
-
-
------ ------- ------------------步骤 7：渲染组件
在 App.js 中，我们将渲染三个组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------------------
------ ------- ---- ----------------------
-------- ----- -
------ -
-----
--------- --
-------- --
------
-
-
------ ------- ---到这里，基本的代办事项列表就已经完成了。接下来，我们来看一下如何使用 Redux 处理异步操作。
步骤 8：处理异步 Action
我们将扩展 addTodo action，使其可以向 API 发送请求。这里我们使用 axios 发送请求。
npm install axios
在 actions.js 中进行修改：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- ------- - ---- -- -------- -- -
------------------------ - ---- --
-------------- -- -
----------
----- -----------
--- -----------------
----- ------------------
--
--
-addTodo action 现在是一个异步函数，它将返回一个函数，函数接受 dispatch 函数作为参数。
我们需要修改 AddTodo.js 组件，以便它能够调用新的 addTodo action。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------- - ---- -------------
------ - ------- - ---- ------------
----- ------- - -- -------- -- -- -
----- ------------ -------------- - ------------
----- ------------ - - -- -
------------------
-- -------------------- -
------
-
-----------------------------
-----------------
-
------ -
----- ------------------------
------ ----------- ------------------ ----------- -- ------------------------------ --
------- -------------------------
-------
-
-
------ ------- ------------------通过修改 addTodo action 和 AddTodo.js 组件，我们现在可以向 API 发送 POST 请求，并向 Redux Store 中添加待办事项。
结论
在本文中，我们了解了如何结合使用 React 和 Redux 开发 Web App。我们通过实际案例对 React 和 Redux 的使用进行了演示，并介绍了如何使用 Redux 处理异步操作。
React 和 Redux 是强大的前端开发框架，它们的组合能够显著提高开发效率和代码可维护性。我们希望这篇文章对您有所帮助，并能够启发您开发更好的 Web App。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67175ea9ad1e889fe2213ba4