React Hooks + Redux：使用 Axios 和 Rest API 的 CRUD 示例

在本教程中，我将向您展示如何通过 CRUD 应用程序构建 React Redux Hooks + Axios 示例来使用 Rest API。

全文：https://bezkoder.com/react-hooks-redux-crud/

React Hooks Redux CRUD 示例概述

我们将构建一个带有 Rest API 调用的 React Redux 教程应用程序，其中：

• 每个教程都有 ID、标题、描述、发布状态。
• 我们可以创建、检索、更新、删除教程。
• 有一个搜索栏可以按标题查找教程。

以下是我们的 React Redux CRUD 应用程序的屏幕截图。

• 创建教程：

• 检索所有教程：

• 单击“编辑”按钮来更新教程：

在此页面，您可以：

• 使用“发布”按钮将状态更改为“已发布”
• 使用“删除”按钮删除该项目
• 使用更新按钮更新项目详细信息

• 按标题搜索教程：

• 使用 Dev-tool 检查 Redux 状态：

此 React Client 使用以下 Web API：

您可以在以下某个帖子中找到构建此类服务器的分步方法：

• Express、Sequelize 和 MySQL
• Express、Sequelize 和 PostgreSQL
• Express 和 MongoDb
• Spring Boot 和 MySQL
• Spring Boot 和 PostgreSQL
• Spring Boot 和 MongoDB
• Spring Boot 和 H2
• Spring Boot 和 Cassandra
• Django 和 MySQL
• Django 和 PostgreSQL
• Django 和 MongoDB

React Hooks Redux CRUD 组件图（带 Router 和 Axios）

现在看看我们要实现的 React 组件：

– 该App组件是 React 的一个容器Router。它具有navbar链接到路由路径的功能。

– 三个页面，用于调度调用Rest API 的操作：Redux Thunk MiddlewareTutorialDataService

• TutorialsList获取并显示教程。
• Tutorial有基于 编辑教程详细信息的表单:id。
• AddTutorial有一个用于提交新教程的表格。

–TutorialDataService用于axios发出 HTTP 请求和接收响应。

React Hooks + Redux 及 API 示例

这张图展示了 Redux 元素在我们的 React Hooks 应用程序中是如何工作的：

我们将创建 Reduxstore来存储数据。其他 React 组件将通过 React-Redux Hooks API 来tutorials与 Store 交互，发送或获取值。action

将reducer采取行动并返回新的state。

技术

• React 17/16
• react-redux 7.2.3
• redux 4.0.5
• redux-thunk 2.3.0
• react-router-dom 5.2.0
• axios 0.21.1
• 引导程序 4

项目结构

我将简单解释一下。

• package.json包含主要模块：react、react-router-dom、react-redux、redux、redux-thunk、axios& bootstrap。
• App是具有 & 导航栏的容器Router。
• 共有 3 页：TutorialsList、、Tutorial。AddTutorial
• http-common.js使用 HTTP 基本 Url 和标头初始化 axios。
• TutorialService具有向 Apis 发送 HTTP 请求的方法。
• .env为此 React CRUD App配置端口。

关于我们将要使用的 Redux 元素：

• actions文件夹包含动作创建器（用于 CRUD 操作和搜索的tutorials.js ）。
• Reducers文件夹包含 reducer（tutorials.js），它根据分派的操作更新应用程序状态。

有关分步说明和 Github，请访问：
https://bezkoder.com/react-hooks-redux-crud/

使用 Redux-Toolkit：
使用 React Hooks 的 Redux-Toolkit CRUD 示例

进一步阅读

安全：

• React Hooks：JWT 身份验证（不使用 Redux）示例
• React Hooks + Redux：JWT 身份验证示例

相关文章：

• 使用 Axios 和 Web API 的 React CRUD 示例（使用 React 组件）
• 使用 Axios 和进度条的 React Hooks 文件上传示例
• React Table 示例：CRUD 应用 | react-table 7

Firebase 的无服务器功能：

• React Hooks + Firebase 实时数据库：CRUD 应用
• React Hooks + Firestore 示例：CRUD 应用

全栈：

• React + Spring Boot + MySQL：CRUD 示例
• React + Spring Boot + PostgreSQL：CRUD 示例
• React + Spring Boot + MongoDB：CRUD 示例
• React + Node.js + Express + MySQL：CRUD 示例
• React Redux + Node.js + Express + MySQL：CRUD 示例
• React + Node.js + Express + PostgreSQL 示例
• React + Node.js + Express + MongoDB 示例
• React + Django + Rest Framework 示例

Docker化：

• Docker Compose React + Node.js Express + MongoDB 示例
• Docker Compose React + Node.js Express + MySQL 示例