Redux 中使用 redux-actions 实现 Action Creator 的标准化写法

在 Redux 中,Action Creator 是用来创建 action 的函数。action 是一个对象,它描述了一个发生的事件和相关的数据。Redux 的核心思想是将应用的状态存储在一个单一的、不可变的状态树中。这个状态树通过 reducer 函数来更新。Action Creator 用来创建这些 action,然后通过 dispatch 函数将它们发送到 reducer 中。

Redux-actions 是一个 Redux 的辅助库,它提供了一些工具函数来简化 Redux 的开发。其中,最常用的就是 createAction 和 createActions 函数。这两个函数可以帮助我们更方便地创建 action 和 action creator。

createAction 函数

createAction 函数是一个工厂函数,它可以创建一个标准的 action creator。使用 createAction 函数可以让我们更方便地创建 action,而且不需要手动编写 action creator。

createAction 函数接受一个字符串类型的参数,表示 action 的类型。它返回一个函数,这个函数接受一个参数,表示 action 的 payload。它返回的对象包含两个属性:type 和 payload。type 属性表示 action 的类型,payload 属性表示 action 的数据。

下面是一个使用 createAction 函数创建 action creator 的示例:

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

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

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

上面的代码中,我们使用 createAction 函数创建了两个 action creator:increment 和 decrement。increment 函数返回的 action 中只有 type 属性,而 decrement 函数返回的 action 中除了 type 属性之外还有一个 payload 属性。

createActions 函数

createActions 函数可以一次性创建多个 action 和 action creator。createActions 函数接受一个对象作为参数,这个对象的键表示 action 的名称,值是一个字符串或者一个函数。如果值是一个字符串,那么这个字符串就是 action 的类型;如果值是一个函数,那么这个函数就是 action creator。

下面是一个使用 createActions 函数创建多个 action 和 action creator 的示例:

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

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

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

上面的代码中,我们使用 createActions 函数创建了两个 action 和 action creator:increment 和 decrement。其中,increment 函数接受一个参数 amount,它返回的 action 中有一个 payload 属性,这个属性是一个对象,包含一个 amount 属性;decrement 函数也接受一个参数 amount,它返回的 action 中也有一个 payload 属性,这个属性是一个对象,包含一个 amount 属性,但是这个 amount 属性的值是负数。

使用 createActions 函数可以帮助我们快速地创建多个 action 和 action creator,而且不需要手动编写 action creator。

总结

Redux-actions 是一个 Redux 的辅助库,它提供了一些工具函数来简化 Redux 的开发。其中,最常用的就是 createAction 和 createActions 函数。这两个函数可以帮助我们更方便地创建 action 和 action creator。使用 createAction 函数可以让我们更方便地创建 action,而且不需要手动编写 action creator;使用 createActions 函数可以帮助我们快速地创建多个 action 和 action creator,而且不需要手动编写 action creator。

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