在前端开发中，redux 是一个非常重要的工具，帮助我们管理应用程序的状态。但是，redux 的 action 通常会变得非常冗长。为了解决这个问题，有了 redux-action-minifier 这个 npm 包。本文将详细介绍如何使用 redux-action-minifier 包来优化我们的 redux action。
安装
首先，我们需要在项目中安装 redux-action-minifier 包。因为该包是一个开源的 npm 包，我们可以直接使用 npm 来进行安装。
npm install --save redux-action-minifier
使用
安装好 redux-action-minifier 包之后，我们需要进行一些设置，来使其正常工作。
配置 redux 中的 action
在 redux 的 action 中，我们需要声明类型和数据，通常是这样的：
-- -------------------- ---- -------
----- --------- - -----------
----- --------- - -----------
-------- ----------------- -
------ -
----- ----------
------- ------
-
-
-------- ----------------- -
------ -
----- ----------
------- ------
-
-这种方式会导致我们的 action 代码变得非常的冗长。
使用 redux-action-minifier 包之后，我们可以将上述代码变成如下所示：
-- -------------------- ---- ------- ----- --- - ----------- ----- --- - ----------- ------ -------- ---- ----------------------- ------ ----- ------- - ---------- ------ -------- -- -- ------ --- ------ -------- -- -- ------ -- --
通过使用 redux-action-minifier 包，我们可以将任务类型的定义和数据的定义合并到同一个函数中。这样可以使我们的代码更加简洁，并且易于管理。
使用
配置好 redux 中的 action 之后，我们可以像平常一样使用 redux 中定义的 action 进行操作，例如：
-- -------------------- ---- -------
-------- ------------ - ------- --- ------- -
------ ------------- -
---- ----
------ -
------ ----------- - -------------
-
---- ----
------ -
------ ----------- - -------------
-
--------
------ -----
-
-在这个例子中，我们只是简单的增加或减少 state 中的 count 属性。
总结
通过使用 redux-action-minifier，我们可以使我们的 action 代码更加简短和易于管理，虽然需要一点额外的工作来配置和使用，但是这将为我们今后的开发带来极大的便利，减少了开发时间和少冗长的代码，值得我们一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005616581e8991b448df476