什么是 redux-crud？
redux-crud 是一个用于简化 redux 应用中 CRUD（创建、读取、更新、删除）操作的 npm 包。它提供了一组简单而有用的 Action 和 Reducer，使得开发者可以更加容易地处理数据的 CRUD 操作。
安装
首先，需要安装 redux-crud：
npm install redux-crud --save
使用
接下来，我们来看一下如何在 redux 应用中使用 redux-crud。
Step 1：定义实体
首先，我们需要定义我们所要操作的实体。我们以一个图书管理的应用为例，定义一个 Book 类型：
class Book {
constructor(id, title, author) {
this.id = id;
this.title = title;
this.author = author;
}
}Step 2：定义 Action 和 Reducer
接下来，我们需要定义我们所需要的 Action 和 Reducer，使得我们可以在应用中完成 CRUD 操作。
Action
我们首先需要定义我们需要的 Action。redux-crud 提供了以下五种基本的 Action：
- FETCH_START：获取数据
- FETCH_SUCCESS：获取数据成功
- FETCH_ERROR：获取数据失败
- CREATE_START：创建数据
- CREATE_SUCCESS：创建数据成功
- CREATE_ERROR：创建数据失败
- UPDATE_START：更新数据
- UPDATE_SUCCESS：更新数据成功
- UPDATE_ERROR：更新数据失败
- DELETE_START：删除数据
- DELETE_SUCCESS：删除数据成功
- DELETE_ERROR：删除数据失败
我们需要为我们的 Book 类型定义这些 Action：
import { createCrudActionCreators } from 'redux-crud';
const BOOKS_INDEX = 'books'
const bookActionCreators = createCrudActionCreators(BOOKS_INDEX, 'id');Reducer
接下来，我们需要定义我们所需要的 Reducer。redux-crud 提供了一个 reducerEnhancer 函数，可以帮助我们简化 Reducer 的编写。我们需要定义一个名为 books 的 Reducer，用于处理我们的 Book 实体的操作：
-- -------------------- ---- ------- ------ - --------------- - ---- ------------- ----- ----------- - ----------------- ---- ----- ------------- ----------- --- ----- ----------- - ----------------- ------ ------------ --- ------ ------- ------------
Step 3：在应用中完成 CRUD 操作
现在我们已经准备好在我们的应用中完成 CRUD 操作了。
获取数据
我们可以使用以下代码来获取所有的 Book：
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- ------------
----- -------- ------- --------- -
------------------- -
----- - ------- - - -----------
------------------------
-
-------- -
----- - ----- - - -----------
-- ----
-
-
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - ---------- -- --
-------- -------------------- --------------------- -- ----------
---
------ ------- ------------------------ ------------------------------创建数据
我们可以使用以下代码来创建一个新的 Book：
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- ------------
----- ----------- ------- --------- -
------------ - ------- -- -
-----------------------
----- - ------- - - -----------
----- - ------ ------ - - ----------------------
-------------------- ------ ------------ ------- ------------ ---
-
-------- -
------ -
----- -----------------------------
------ ----------- ------------ --
------ ----------- ------------- --
------ ------------- ------------- ----- --
-------
--
-
-
----- ------------------ - ---------- -- --
-------- -------------------- --------------------- -- ----------
---
------ ------- ------------- ---------------------------------更新数据
我们可以使用以下代码来更新一个已经存在的 Book：
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- ------------
----- ---------- ------- --------- -
------------ - ------- -- -
-----------------------
----- - -------- ---- - - -----------
----- - ------ ------ - - ----------------------
-------------------- -------- ------ ------------ ------- ------------ ---
-
-------- -
----- - ---- - - -----------
------ -
----- -----------------------------
------ ----------- ------------ ------------------------- --
------ ----------- ------------- -------------------------- --
------ ------------- ------------- ----- --
-------
--
-
-
----- ------------------ - ---------- -- --
-------- -------------------- --------------------- -- ----------
---
------ ------- ------------- --------------------------------删除数据
我们可以使用以下代码来删除一个已经存在的 Book：
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- ------------
----- ----------- ------- --------- -
----------- - ------- -- -
----- - -------- ---- - - -----------
-------------------------
-
-------- -
------ -
------- --------------------------------- -------------
--
-
-
----- ------------------ - ---------- -- --
-------- -------------------- --------------------- -- ----------
---
------ ------- ------------- ---------------------------------总结
使用 redux-crud 可以让我们更加容易地完成 redux 应用中 CRUD 操作。我们需要定义实体、Action 和 Reducer，并在应用中定义我们所需要的操作，即可完成应用中的 CRUD 操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8aa6