如果你正在开发一个 React 应用或管理系统，并且需要使用 Redux 来处理你的业务逻辑和状态管理，那么你肯定会遇到要实现 CRUD (Create, Read, Update, Delete) 功能的需求。那么如何快速地实现简单又可靠的 CRUD 操作呢？介绍一个 npm 包 redux-fast-crud。
什么是 redux-fast-crud
redux-fast-crud 是一个用于快速构建 Redux CRUD 应用程序的 npm 包，它能够最大程度自动化代码生成，极大地减少了代码编写时间并提升开发效率。redux-fast-crud 支持在 React、React Native、Vue 加上同理的扩展库下使用，是一个十分实用的 npm 包。
使用 redux-fast-crud
redux-fast-crud 提供了以下简便的 API：
- createAction：一个帮助我们创建 action 的函数；
- createReducer：一个用于 reducer 创建的函数；
- createFetchConfig：创建与 fetch 接口相对应的简单配置；
- createAsyncThunk：这个 API 可以快速创建 async 异步 actons。
下面，我们通过一个简单的示例来使用 redux-fast-crud：
首先，需要我们安装 redux-fast-crud：
npm install redux-fast-crud
接下来，我们在我们的项目中创建一个 CRUD 的 Redux 模块。我们首先要创建一个简单的带有状态的待办事项列表，其中包括添加任务、删除任务、更新任务等功能。
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------
----- --------------- - --------------------------------
------ ----- -------- - -----------
------ ----- ----------- - --------------
------ ----- ----------- - --------------
------ ----- --------- - ------------
------ ----- ------- - -----------------------
------ ----- ---------- - --------------------------
------ ----- ---------- - --------------------------
------ ----- -------- - ------------------------
----- ------------ - -
----- --
--
----- ----------- - --------------------------- -
----------- ------- - ------- -- -- --
----- --------------- - ---------- --
---
-------------- ------- - ------- -- -- --
----- ---------------------- -- ------- --- -----------
---
-------------- ------- - ------- -- -- --
----- ------------------- --
------- --- ---------- - - -------- ---------- - - ----
-
---
------------ ------- - ------- -- -- --
----- -------
--
---
------ ------- ------------我们定义了 ADD_TODO、DELETE_TODO、UPDATE_TODO、LOAD_TODO 四个 action，同时使用了 createFetchConfig 生成了对应接口的配置。接着，我们根据这四个 action，定义了 todoReducer，用于处理对应的 action 使用时传递的 payload。
接下来，我们还需要定义一个用于发送异步请求的函数。可以使用 redux-fast-crud 的 createAsyncThunk API 快速创建：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------ ------ ----- ----------- - ----------------- ----------------------- ------------- -- ------ ----- ----------- - ----------------- ---------------------- ------------- -- ------ ----- ----------- - ----------------- ------------------------ ------------- -- ------ ----- ----------- - ----------------- ----------------------- ------------- --
我们通过 createAsyncThunk，用来创建一个异步操作的 action。我们定义了 CREATE_TODO、FETCH_TODOS、DELETE_TODO、UPDATE_TODO 四个异步 action，分别对应 todo 的创建、获取、删除及更新操作。接着，我们在组件中使用这些异步 action，来对我们的待办事项进行 CRUD 操作。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ -
------------
------------
------------
-----------
- ---- --------------------
----- ------------ - -- -- -
----- -------- - --------------
----- ----- - ----------------- -- ------------------
----- ---------- - ---- -- ----------------------------
----- ---------- - ---- -- ----------------------------
----- ---------- - ---- -- -------------------------------
------------ -- -
------------------------
-- ------------
----- ------------------ - -- -- -
------------
--- --- -------
------ ---- ------
------------ ---- ------------
---
--
----- --------------------- - ---- -- -
------------
--------
------ -------- ------
------------ -------- ------------
---
--
----- --------------------- - ---- -- -
-----------------
--
------ -
--
-----
-------- ---------
------- -------------------------------- -------------
--------------- -- -
---- --------------
---------------------
-------------------------
------- ----------- -- -----------------------------
------
---------
------- ----------- -- -----------------------------
------
---------
------
---
------
---
--
--
------ ------- -------------以上就是一个简单的在 React 中使用 redux-fast-crud 创建 CRUD 应用的整个过程，使用redux-fast-crud 让我们可以快速易用的实现简单的 CRUD 功能，同时减少了繁琐的代码开发，提升了开发效率，让我们专注于业务逻辑开发。
总结
redux-fast-crud 是一个十分实用的 npm 包，在开发 CRUD 应用时，它可以十分方便地帮助我们自动生成基本的代码，减少了繁琐的代码编写过程，让我们更加关注于业务实现。这也为快速迭代开发提供了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff581e8991b448ddc6d