在前端开发中，redux 是一个非常流行和实用的状态管理工具。但在实际应用中，随着应用规模增大，越来越多的 action 和 reducers 会使代码变得臃肿而难以维护。为了解决这个问题，redux-shortcuts 库应运而生。
什么是 redux-shortcuts？
redux-shortcuts 是一个用于简化 redux action 和 reducer 的工具，它可以让你更轻松地创建和管理 redux 的 action 和 reducer。它提供了一个简单直观的 API，使得创建和管理 action 和 reducer 变得非常容易。
redux-shortcuts 的核心是对常用的 action 和 reducer 模式进行了优化，使得你在编写代码时可以更轻松地维护你的 redux 状态。通过 redux-shortcuts，你可以轻松处理一些常见的逻辑，如 loading、success 和 error 三种状态的流程。
安装和使用
通过 npm 安装 redux-shortcuts：
npm install redux-shortcuts
使用 redux-shortcuts 的第一步是引入它：
import * as shortcuts from 'redux-shortcuts';
创建一个 reducer
你可以通过 shortcut 对象创建 reducer：
-- -------------------- ---- -------
------ - -------- - ---- ------------------
----- ------- - ----------
--------------------- -
-------- -----
------ ------
-------- ------
-------- ------- ------- -- -
------ -
---------
-------- -----
------ ------
-------- ------
--
--
--
----------------------------- -
-------- ------
------ ------
-------- -----
-------- ------- ------- -- -
------ -
---------
------------------
--
--
--
--------------------------- -
-------- ------
------ -----
-------- ------
-------- ------- ------- -- -
------ -
---------
------ ---------------
--
--
--
---redux-shortcuts 对 reducer 的创建进行了封装，你可以更加轻松地管理状态。
创建 action creator
你可以通过 createAction 方法创建 action creator。它有两个参数：action 的类型和返回一个包含 payload 的函数：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
------ ----- ---------------- - ---------------------------------- -------- -- -
------ ---------- --------- -- -
-- ------
-----------------------------
---------------- -- ----------------
------------ -- -
----------------------------------------
--
-------------- -- -
---------------------------------------
---
--
---
------ ----- ----------------------- - -------------------------------------------
------ ----- --------------------- - -----------------------------------------fetchUserProfile 方法返回的是一个函数，该函数接受 dispatch 和 getState 两个参数，可以用于处理异步请求或者其他一些复杂的逻辑。当请求结束后，你可以通过 dispatch 方法触发 fetchUserProfileSuccess 或者 fetchUserProfileError 两个 action。
在组件中使用
你可以像往常一样在组件中使用 connect 方法连接到 redux。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------------- - ---- ---------------------
----- ---- ------- --------------- -
------------------- -
----- - ------ - - -----------
----------------------------------------------
-
-------- -
----- - ----- ------ ------- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- --------------
-
------ -
-----
--------------------
---------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
----- -----------
------ -----------------
-------- -------------------
--
--
------ ------- -------------------------------通过 connect 方法和 mapStateToProps 将 reducer 中的状态映射到组件的 props 中，你可以轻松地在组件中访问状态。
总结
通过使用 redux-shortcuts，你可以更加高效地管理 redux 中的状态，避免了冗长的 action 和 reducer 的编写。在实际的项目中，redux-shortcuts 库的使用可以提高你的工作效率以及代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b29