@nju33/reducer-action 是一个帮助前端开发者更加轻松的处理 Redux 中 Action 的 npm 包。在使用该包之前，你需要先了解 Redux 的基本概念。
@nju33/reducer-action 的作用
在 Redux 中，我们通过 Action 派发动作来改变应用的状态。如果直接在纯函数中修改状态，Redux 就会认为这并不是一个正常的状态，从而抛出错误。而 @nju33/reducer-action 正是为了规避这个问题而被开发出来的。
这个包使我们不必手动地去解构 action，更不必增加函数的套嵌层次来处理 action，大大减少了代码量。
怎样使用
安装
npm i @nju33/reducer-action
导入
import { createAction } from "@nju33/reducer-action";使用
const SET_VALUE = "app/SET_VALUE";
const setValue = createAction(SET_VALUE); // 创建 action 对象
setValue("hello, world"); // 在你的代码中派发这个动作带有参数的使用
const SET_VALUE = "app/SET_VALUE";
const setValue = createAction(SET_VALUE, (key, value) => ({
[key]: value,
}));
setValue("username", "john");Action 对象
在我们编写 Redux 中的 reducer 时，需要根据接收到的 action 对象中的 type 属性来判断要进行什么样的操作。因此，传递给 reducer 的 action 对象应该有以下的结构。
{
type: "app/SET_VALUE",
payload: {
value: "hello, world",
}
}加入了 @nju33/reducer-action 后，我们可以用以下方式创建 action 对象。
const SET_VALUE = "app/SET_VALUE";
const setValue = createAction(SET_VALUE);
setValue("hello, world"); // {"type":"app/SET_VALUE","payload":"hello, world"}利用 createAction 方法创建的 action 对象会自动加上 type 属性，并且会将传递给它的参数放在 payload 属性中。
带有值的 Action 对象
考虑到在我们的业务场景中，很多时候我们需要传递一些额外的参数，例如请求的 URL 或者请求的参数。@nju33/reducer-action 提供了增强版的 createAction 方法，你可以使用它来创建带有值的 Action 对象。
-- -------------------- ---- -------
-- ---------
------ - --------------------- - ---- ------------------------
------ ----- ------- - --------------------------------------
-- -------
------ - ------- - ---- -----------
--------- ---- ------- ---
-- ----------
------ - ------------- - ---- ------------------------
------ - ------- - ---- -----------
----- ------- - --------------
-
--------------- ------- ------- -- -
------ -
---------
------------------
--
--
-- ---
--
-- ---
--总结
使用 @nju33/reducer-action 有以下好处：
- 减少了解构 action 的代码量。
- 减少了增加函数嵌套层数的代码量。
- 帮助创建符合规范的 action 对象。
- 代码更加简洁易读。
希望本文可以帮助你更好的理解并使用 @nju33/reducer-action。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f1d9381d61a3540da2