介绍
redux-action-class-middleware 是一个 npm 包，基于 Redux 中间件机制，支持在 Redux 中注册 Class 作为 Action Creator，方便地实现 Redux 应用的复杂逻辑。
本篇文章将详细介绍如何使用 redux-action-class-middleware 包，并解释它的原理和使用方式。
安装
首先，在你的项目中安装 redux-action-class-middleware：
--- ------- -----------------------------
引入
在 Redux 的 createStore 函数中使用 redux-action-class-middleware：
------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------- --
如何使用
redux-action-class-middleware 的核心功能在于，它允许你注册一个 Class 作为 Action Creator，并把它传给 dispatch 函数。让我们看下具体如何使用。
创建一个 Class
首先，我们需要创建一个 Class，作为我们的 Action Creator。
----- -------- -
-------------------- -
--------- - ------------
------------ - --------
-
-这个 Class 有两个字段：type 和 payload。我们用它来描述一次 App 中的某个操作。
注册 Class
接下来，我们需要将这个 Class 通过 middleware 注册到 Redux 中。
-- - ------- ----
------ ------- -------- --------------- - --- ------- -
------ ------------- -
---- ------------
------ - -------- -------------- --
--------
------ ------
-
-
-- -------
------------------ --------------- ----------这里，我们用 store.dispatch 函数来发起一个 Action。注意，我们没有传入一个普通的对象，而是给了一个 new MyAction 对象。
这时，Redux 会调用 redux-action-class-middleware 处理这个 Action。这个中间件会检测这个对象是不是 Class 类型，如果是的话，就会自动调用它的构造函数，并把生成的对象传给下一个 middleware。在 Redux 触发 Reducer 时，这个对象将被作为 Action 传入 Reducer。
获取结果
在 Reducer 中，我们可以获取这个 Action 对象，并按需进行处理。
------ ------- -------- --------------- - --- ------- -
------ ------------- -
---- ------------
------ - -------- -------------- --
--------
------ ------
-
-在这个例子中，我们从 action 中获取 payload，并返回了一个新的 state 对象。如果你的 Action 对象中包含更多的信息，你也可以利用它们进行更复杂的逻辑处理。
优点
使用 redux-action-class-middleware，可以让你更加方便地描述 Redux 应用中的操作。通过注册一个 Class，可以方便地传递更多的信息到 Reducer 中，并让 Reducer 更好地理解应用中发生的操作。
示例代码
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------------------------
----- -------- -
-------------------- -
--------- - ------------
------------ - --------
-
-
------ ------- -------- --------------- - --- ------- -
------ ------------- -
---- ------------
------ - -------- -------------- --
--------
------ ------
-
-
----- ----- - ------------
----------
--------------------------------
--
------------------ --------------- ----------结论
本文介绍了 redux-action-class-middleware 的使用方式，并解释了它的原理和优点。借助这个 npm 包，你可以更加方便地注册 Class 作为 Action Creator，并使用更复杂的信息来描述应用中的操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067009e361a36e0bce8bde