随着前端应用的复杂度越来越高，状态管理也变得越来越重要。Redux 是一个很流行的状态管理库，它有着良好的架构和可拓展性，但是在某些情况下，使用 Redux 可能会引入一些不必要的复杂度。为此，下面介绍一个轻量级的 Redux 辅助工具——redux-whenever（GitHub 地址）。
什么是 redux-whenever？
redux-whenever 是一个基于 Redux 的辅助库，它通过增加一些常用的 Redux 模式来简化 Redux 的使用。redux-whenever 可以处理所有 Redux 相关的操作，使得在开发中更加简单和高效。
redux-whenever 的主要功能如下：
- 无需编写 reducers 和 action，通过提供相应的 reducer 名称与操作类型，即可生成对应的 reducer、actionCreator。
- 提供了 asyncResult 模式，可以轻松处理异步操作，包括 loading、error 和 data 等状态的管理。
- 可以自动注入 middleware，达到这样的目的：对于某些状态变化我们可能需要触发不同的 API 请求，如果能够在这些状态变化的同时请求 API，那么 redux-whenever 也可以很好地实现。
如何使用 redux-whenever？
redux-whenever 的使用非常简单，只需要安装依赖，定义对应的 reducer 名称和操作类型即可。
安装
npm install redux-whenever --save
定义 reducer 名称和操作类型
-- -------------------- ---- ------- ------ - ------------- - ---- ----------------- ------ ------- --------------- ------------ ------------ ---------- ---------- -------- ---
使用生成的 reducer 和 actionCreator
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- ------ ------- ---- ------------ ----- ------------ - - ------ -- -------- ------ ------ -- -- ----- ------- - ---------------------- - -------------------- ----- -- -- --------- ------ ----------- - - --- -------------------- ----- -- -- --------- ------ ----------- - - --- ------------------ ----- -- -- --------- -------- ---- --- ------------------ ------- ------- -- -- --------- -------- ------ ----- -------------- --- ----------------- ------- ------- -- -- --------- -------- ------ ------ -------------- --- --- ------ ------- --------
异步操作
对于异步操作，可以使用 asyncResult 模式，示例代码如下：
-- -------------------- ---- ------- ------ - ------------- - ---- ----------------- ------ ------- --------------- ---------- ---------- -------- -- - --------------- - -------- -- -------------------------- ------------- -------- -- ----- -------- ---
- promiseGetter：必选，函数类型，用于指定当前异步操作的 Promise 生成函数。
- metaGetter：可选，函数类型，用于指定当前 Promise 的参数，也可以将数据中的 id 与 action 中进行绑定。
在对应的 reducer 中，需要处理 asyncResult 模式。示例代码如下：
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- ------ ------- ---- ------------ ----- ------------ - - ----- ---- -- ----- ------- - ---------------------- - ---------------------- ------- ------- -- -- --------- ----- ----------- --- --- ------ ------- --------
使用 middleware
对于某些状态变化我们可能需要触发不同的 API 请求，如果能够在这些状态变化的同时请求 API，那么 redux-whenever 也可以很好地实现。示例代码如下：
-- -------------------- ---- ------- ------ - --------- --------------------- - ---- ----------------- ------ ------- ---- ------------ ------ - ------------ -------------- - ---- -------- ----- ------------ - - --------- --- ------------ -- -- ----- ------- - ---------------------- - ---------------------------- ----- -- ------ ---------------------------- ------- ------- -- -- --------- --------- -------------- --- ------------------------------- ----- -- ------ ------------------------------- ------- ------- -- -- --------- ------------ -------------- --- --- ------ ------- ---------------------------------------------- -- ----- --- -- ---------------------------- ------------ ------------------------------- --------------- ----
autoRequestMiddleware 会自动处理 actionTypes 为 ${actionType}_SUCCESS 和 ${actionType}_FAILED 的请求状态操作，如上面的示例代码所示。
总结
redux-whenever 是个轻量级的 Redux 辅助工具，它可以帮助我们更加简单和高效地处理异步操作和重复性操作，同时也可以使我们的代码更加清晰和易读。它广泛的应用已经得到了众多开发者的认可并得到了积极的维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675181e8991b448e3cf4