在 Redux 中，Action 是一个普通的 JavaScript 对象，用于描述应用程序中的事件。它包含一个 type 属性和一些可选的数据属性，用于描述发生的事件以及相关的数据。Redux 中的 Action 可以帮助我们处理用户交互、异步请求等各种类型的事件。
在使用 Redux 过程中，我们可能需要自定义一些 Action 类型来更好地描述不同的事件。本文将介绍如何自定义 Action 类型及其使用方法，并提供详细的示例代码。
自定义 Action 类型
在 Redux 中，可以通过编写常量来定义 Action 类型，然后在 Action 中使用这些常量来表示事件类型。自定义 Action 类型的主要步骤如下：
- 在常量文件中定义常量
在 Redux 应用程序中，将所有的常量放在单独的常量文件中可以让代码更加清晰。我们可以在常量文件中定义 Action 类型的常量。例如：
export const USER_LOGIN = 'USER_LOGIN'; export const USER_LOGOUT = 'USER_LOGOUT'; export const FETCH_DATA = 'FETCH_DATA';
在上面的例子中，我们定义了三个常量，分别表示用户登录事件、用户注销事件和获取数据事件。
- 在 Action 中使用常量
在 Action 中，我们可以使用上面定义的常量来表示事件类型。例如：
import { USER_LOGIN } from './constants';
export const userLogin = (user) => {
return {
type: USER_LOGIN,
user: user
};
};在上面的例子中，我们定义了一个函数 userLogin，它返回一个对象作为 Action。这个对象包含一个 type 属性，其值为常量 USER_LOGIN，表示用户登录事件。此外，对象还包含一个 user 属性，表示登录用户信息。
- 在 Reducer 中处理 Action
在 Reducer 中，我们可以通过 Action 的 type 属性来判断发生的事件类型，然后根据不同的事件类型做出不同的处理。例如：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
----- ------------ - -
----------- ------
----- ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
----------- -----
----- -----------
--
--------
------ ------
-
--
------ ------- ------------在上面的例子中，我们定义了一个名为 userReducer 的 Reducer，它处理用户登录事件。当 Action 的 type 属性为 USER_LOGIN 时，Reducer 将更新应用程序状态，表示用户已登录，并将登录用户信息保存到状态中。
使用自定义 Action 类型
使用自定义 Action 类型的步骤如下：
- 在组件中导入 Action
在组件中，我们可以导入自定义的 Action。例如：
import { userLogin } from './actions';在上面的例子中，我们导入了自定义的 Action userLogin，它用于表示用户登录事件。
- 在组件中分发 Action
在组件中，我们可以使用 dispatch 函数来分发 Action。例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - --------- - ---- ------------
----- -------------- - -- -- -
----- -------- - --------------
----- ----------- - -- -- -
----- ---- - - --------- -------- --------- ---------- --
--------------------------
--
------ -
-----
------- ------------------------------------
------
--
--
------ ------- ---------------在上面的例子中，我们定义了一个名为 LoginComponent 的组件，其中定义了一个名为 handleLogin 的函数。当用户点击登录按钮时，将调用 handleLogin 函数，并分发用户登录事件。我们可以将用户信息作为参数传递给 userLogin 函数。
- 在 Reducer 中处理 Action
在 Reducer 中，我们可以处理自定义的 Action。例如：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
----- ------------ - -
----------- ------
----- ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
----------- -----
----- -----------
--
--------
------ ------
-
--
------ ------- ------------在上面的例子中，我们定义了一个名为 userReducer 的 Reducer，它处理用户登录事件。当 Action 的 type 属性为 USER_LOGIN 时，Reducer 将更新应用程序状态，表示用户已登录，并将登录用户信息保存到状态中。
示例代码
下面是一个完整的示例应用程序，包括自定义 Action 类型、Action 和 Reducer 的定义以及在组件中使用自定义 Action。
-- -------------------- ---- -------
-- ------------
------ ----- ---------- - -------------
-- ----------
------ - ---------- - ---- --------------
------ ----- --------- - ------ -- -
------ -
----- -----------
----- ----
--
--
-- -----------
------ - ---------- - ---- --------------
----- ------------ - -
----------- ------
----- ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
----------- -----
----- -----------
--
--------
------ ------
-
--
------ ------- ------------
-- -----------------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - --------- - ---- ------------
----- -------------- - -- -- -
----- -------- - --------------
----- ----------- - -- -- -
----- ---- - - --------- -------- --------- ---------- --
--------------------------
--
------ -
-----
------- ------------------------------------
------
--
--
------ ------- ---------------
-- ------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
------ -------------- ---- -------------------
----- ----- - -------------------------
----- --- - -- -- -
------ -
--------- --------------
--------------- --
-----------
--
--
------ ------- ----在上面的示例代码中，我们定义了一个 App 组件作为入口组件，并在其中使用了 Provider 组件为组件树提供 Redux store。我们也定义了一个 LoginComponent 组件用于用户登录，并在其中导入了自定义 Action。
总结
本文介绍了 Redux 中自定义 Action 类型及其使用方法，希望能够对读者在使用 Redux 过程中理解和处理事件类型有所帮助。自定义 Action 类型可以帮助我们更好地组织和管理事件类型，并使代码更加清晰和易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c361a48841e9894903044