在前端开发过程中，Redux 是一种非常流行的状态管理库。Redux 的设计思想十分简洁明了，但是在实际开发中需要处理的细节却非常繁琐。因此，许多开发者推出了一些实用的工具库帮助简化 Redux 的使用。在此，我推荐一个 npm 包：ideal-redux-utils。
简介
ideal-redux-utils 是一款针对 Redux 库的通用工具库。该库提供了很多实用的工具函数，可以帮助开发者更好地使用 Redux。主要功能包括：
- 根据 payload 创建 action；
- 根据类型和 payload 创建 action；
- 生成 reducer；
- 合并 reducer。
另外，由于 ideal-redux-utils 是纯函数库，因此也支持 Tree Shaking。
安装
你可以使用 npm 或 yarn 安装 ideal-redux-utils。
npm install ideal-redux-utils --save
或
yarn add ideal-redux-utils
使用
createAction
createAction 函数可以用于创建一个 Redux action。
import { createAction } from 'ideal-redux-utils';
const SET_COUNT = 'SET_COUNT';
const setCountAction = createAction(SET_COUNT);
setCountAction(10);
// { type: 'SET_COUNT', payload: 10 }你也可以传递第二个参数，以设置 action 的 payload。
const SET_COUNT = 'SET_COUNT';
const setCountAction = createAction(SET_COUNT, (count) => ({ count }));
setCountAction(10);
// { type: 'SET_COUNT', payload: { count: 10 } }createTypedAction
createTypedAction 函数可以用于创建一个类型固定的 Redux action。
import { createTypedAction } from 'ideal-redux-utils';
const setCountAction = createTypedAction('SET_COUNT')<{ count: number }>();
setCountAction({ count: 10 });
// { type: 'SET_COUNT', payload: { count: 10 } }createActionCreator
createActionCreator 函数可以用于创建一个基于 action creator 的 Redux action。
import { createActionCreator } from 'ideal-redux-utils';
const setCountActionCreator = createActionCreator('SET_COUNT');
setCountActionCreator(10);
// { type: 'SET_COUNT', payload: 10 }你也可以传递第二个参数，以设置 action 的 payload。
const setCountActionCreator = createActionCreator('SET_COUNT', (count) => ({ count }));
setCountActionCreator(10);
// { type: 'SET_COUNT', payload: { count: 10 } }createReducer
createReducer 函数可以用于创建一个 reducer。
-- -------------------- ---- -------
------ - -------------- ----------------- - ---- --------------------
----- ------------ - -
------ -
--
----- --------------- - -------------------------------- ------- ------ -----
----- ------- - --------------------------- --------- -- -
-------------------------------- ------- ------- -- -
------ - --------- ------ ----------- - --------------------- --
---
---
------------------ ----------------- ------- -- ----
-- - ------ -- -在上面的例子中，我们使用了 createTypedAction 函数创建了一个名为 INCREMENT 的 action，它包含了一个 amount 属性。然后，我们使用 createReducer 函数创建了一个 reducer，当接收到 type 为 INCREMENT 的 action 时，它会返回一个新的状态，将 count 属性加上 action.payload 中的 amount 值。
combineReducers
combineReducers 函数可以用于组合多个 reducer。
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
----- -------------- - ---------------------------------- --------- -- -
-- ------------------
---
----- ----------- - ------------------------------- --------- -- -
-- ---------------
---
----- ----------- - -----------------
-------- ---------------
----- -----------
---
---------------------- -
----- ------------
-------- -
------- --
-
---
-- - -------- - ------ -- -- ----- - ----- --- ---- - - -在上面的例子中，我们使用了 combineReducers 函数将两个 reducer 组合成一个。另外，我们也可以传递一个对象，其中每个属性都是一个 reducer 函数，最终会返回一个新的 reducer。
总结
至此，我们了解了 ideal-redux-utils 包提供的基本功能和使用方法，这其中包括了创建 action、创建 reducer 和组合 reducer。它极大地简化了 Redux 库的使用，使开发者可以更加专注于业务的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e31ea