前言
在前端开发中，Redux 是一种非常流行的状态管理工具，但是它本身只提供了一些基础的 API，对于复杂的业务场景，我们需要自己去封装一些工具类来帮助我们实现。在这种情况下，@kogai/redux-util 这个 npm 包就可以帮助我们更快地解决问题。
什么是 @kogai/redux-util
@kogai/redux-util 是一个 Redux 工具类库，包含了一系列的工具函数，以及一个高阶组件。它主要解决了以下问题：
开发过程中经常需要写一些 action 和 reducer，@kogai/redux-util 提供了一些快捷的方法，帮助我们更简单地创建和组织 action 和 reducer。
在大型应用中，往往需要多个 reducer 协同工作，@kogai/redux-util 提供了一个高阶组件，帮助我们更方便地处理多个 reducer 的通信和数据流。
在一些常见的场景中，比如向后台发起请求或者处理表单等，@kogai/redux-util 也提供了相应的工具函数，方便我们进行开发。
如何使用 @kogai/redux-util
在使用 @kogai/redux-util 之前，需要先安装 Redux 和 react-redux：
npm install redux react-redux --save
然后再安装 @kogai/redux-util：
npm install @kogai/redux-util --save
创建 action 和 reducer
@kogai/redux-util 提供了 nonStateAction 和 makeReducer 两个快捷方法，帮助我们更方便地创建 action 和 reducer。
nonStateAction
nonStateAction 用于创建不需要更新 state 的 action，比如通知类的 action。
import { nonStateAction } from '@kogai/redux-util';
// 创建一个通知类的 action，传入的参数为 payload
export const notify = nonStateAction('NOTIFY');makeReducer
makeReducer 用于创建 reducer，它接收一个对象作为参数，对象的 key 表示 action 类型，value 表示对应的 reducer 函数。
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
------ - ------ - ---- ------------
-- -- ------- --
----- ------------- - ------- -------- -- -
------ -
--------- -- -------- -----
----------------- -----
-------- --------
--
--
-- - ------- ---- ----- -----
----- ------- - -------------
--------- --------------
---
------ ------- --------处理多个 reducer
在复杂业务场景下，我们往往需要多个 reducer 协同工作，此时 @kogai/redux-util 提供了一个高阶组件，帮助我们更方便地处理 reducer 之间的通信和数据流。
createCombineReducer
createCombineReducer 用于创建一个组合 reducer，它接收一个对象作为参数，对象的 key 表示 reducer 的名称，value 表示对应的 reducer 函数。
-- -------------------- ---- ------- ------ - -------------------- - ---- -------------------- ------ ----------- ---- ---------------- ------ ------------------- ---- ------------------------ ------ ------------------- ---- ------------------------ ----- ----------- - ---------------------- ----- ------------ ------------- -------------------- ------------- -------------------- --- ------ ------- ------------
在上面的例子中，我们将 userReducer、shoppingCartReducer 和 notificationReducer 组合成了一个 rootReducer，传入 createStore 函数中即可。
请求数据和处理表单
@kogai/redux-util 还提供了一些工具函数，方便我们处理一些常见场景下的操作，比如请求数据和处理表单。
createRequestActionAndReducer
createRequestActionAndReducer 用于创建一个包含请求数据过程的 action 和对应的 reducer 函数。
-- -------------------- ---- -------
------ - ----------------------------- - ---- --------------------
-- ---- ------ - ----------------
----- ----------------- ------------ - -------------------------------
----- ------------- -- ------ ---
------- ----- ---------- ------- ---- -- - -- ------ ------------
----- ---- - ----- --------------------------------------
------ -----
--
---
-- -- -----------
-------------------------- ---- --- ----
-- ----------- ------------- -----handleFormSubmit
handleFormSubmit 用于处理表单的提交操作，它接收一个 onSubmit 回调函数，该函数使用表单数据来更新 state 中的数据。
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------
-- ------
----- ------------ - ------ -- -
-------------------------------------- -------
--
------ -
----- ------------------------
--- ---- ---
-------
--在上面的例子中，我们可以看到 handleFormSubmit 会自动为我们创建一个 action 和 reducer，用于更新表单数据。
后续学习和指导意义
以上是 @kogai/redux-util 的基本使用教程，它提供了一些快捷方法和工具函数，帮助我们更方便地处理 Redux 的开发。
除了 @kogai/redux-util，还有一些其他的 Redux 工具类库，比如 redux-thunk、redux-saga 等。学习这些工具类库可以帮助我们更深入地理解 Redux 的原理，并且可以提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e2444fb