Redux 的 Action Creators 设计

在使用 Redux 进行状态管理时,Action 是一个非常重要的概念。Action 是一个一般的 JavaScript 对象,用于描述在应用程序中发生的事件。当一个 Action 被触发时,Redux 会根据 Action 中的内容更新应用程序的状态(State)。

在 Redux 中,Action Creators 是用于创建 Action 的函数。Action Creators 将简单的 JavaScript 对象转化为标准的 Redux Action,在 Redux 应用中通常被用于触发状态更新。在本篇文章中,我们将探讨 Action Creators 的设计和实践。

设计 Action Creators

正确的设计 Action Creators 能够使 Redux 应用程序具有更好的可维护性、可测试性和可读性。下面的几点是设计 Action Creator 时需要考虑的内容:

Action Creator 本身应该是一个纯函数

Action Creator 应该是一个纯函数,它接受一些参数作为输入,然后返回一个 Action 对象。纯函数是指这个函数不依赖任何外部状态(比如网络请求、定时器等),也不会产生副作用(会修改传入的参数或者全局状态),相同的输入永远会得到同样的输出。这样做的好处是,测试变得非常方便,我们可以用简单的断言来验证 Action Creator 的行为,同时也能保证 Action Creator 的可重用性。

-------- ------------- -
  ------ -
    ----- -----------
    -----
  -
-

Action 的 type 应该是一个常量

Redux 的建议是,将每个 Action 的 type 抽象成一个常量,在整个应用程序中都要使用它而不是使用字符串字面量。这样可以避免犯拼写错误、保持代码风格一致性,并且还能使得 IDE 更好地验证代码。我们可以使用一个单独的文件来定义所有的 Action 类型常量。

-- ------------
------ ----- -------- - -----------
-- ----------
------ - -------- - ---- --------------

-------- ------------- -
  ------ -
    ----- ---------
    -----
  -
-

Action 中不应该包含过多的数据

Action 应该只包含最少的数据,尽可能地让 Action 能够清晰地表示发生的事件。因此,我们应该避免在 Action 中存储大量的数据。

创建 Action Creators 的辅助函数

由于 Action Creators 往往只是创建一个对象,因此可以写一个辅助函数来做这个工作。下面是一个标准的辅助函数,它能够让我们使用更加简短的代码来创建 Action。

-------- ------------------ ------- - --- -
  ------ - ----- ---------- --
-

使用 createAction 函数创建 Action 的例子:

----- --------- - ----------------------------------

----- ------- - ------------------------ ------ -- -
  ------ - ---- --
---

Action Creators 的组合

在复杂的 Redux 应用程序中,有时我们需要一次性发送多个 Action,或者将多个 Action Creators 组合起来,这时候可以使用 Redux Thunk 或者 Redux Saga 等中间件来实现。

示例代码

下面是一个 Todo 应用程序中的 Action Creators:

-- ------------
------ ----- -------- - ------- --- ------
------ ----- ----------- - ------- ------ ------
------ ----- --------------------- - ------- --- ---------- --------

-- ----------
------ - --------- ------------ --------------------- - ---- --------------

--- ---------- - --

------ ----- ------- - ---------------------- ------ -- -
  ------ -
    ---------- ------
    --- -------------
    -----
  --
---

------ ----- ---------- - ------------------------- ---- -- -- -- ----

------ ----- ------------------- - -------------
  ----------------------
  -------- -- -- ------ --
--

结论

在 Redux 应用程序中,正确的设计 Action Creators 可以增加应用程序的可维护性、可测试性和可读性。通过创建纯函数的 Action Creators、使用常量来定义 Action 类型、尽可能不在 Action 中存储过多的数据、使用辅助函数来创建 Action Creators,以及使用中间件来组合 Action Creators 等技术,我们可以使这一过程更为简单和规范化。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6732c9e80bc820c5823edd06