什么是 actiontypemiddleware
在编写 Redux 应用时，我们需要定义很多 action type，并在 reducer 中根据这些 type 处理不同的逻辑。而 actiontypemiddleware 就是为了简化 Redux 应用中的 action type 处理而生。
actiontypemiddleware 可以自动生成对应的 action type 常量，并在 action 中自动添加对应的 type 属性，省去手写 type 常量的繁琐步骤。
如何使用 actiontypemiddleware
在 Redux 应用中使用 actiontypemiddleware 很简单，只需要安装 npm 包，并在 applyMiddleware 中引用即可。
首先，先使用 npm 安装 actiontypemiddleware：
npm install actiontypemiddleware --save
然后，在 Redux 应用中使用 applyMiddleware，引入 actiontypemiddleware：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ---------------- ---- ----------------------- ------ ----------- ---- ------------- ----- ---------- - ------------------- ----- ----- - ------------ ------------ --------------------------- --
在上面的例子中，我们首先导入 Redux 相关的库，然后使用 createMiddleware 创建 actiontypemiddleware 中间件，并在 applyMiddleware 中引入 middleware，最后创建 Redux store。
接下来，当我们需要定义一个新的 action 时，只需要在 action 中添加一个 type 属性，并使用 createActionType 函数自动生成对应的 action type 常量即可：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
------ ----- -------- - -----------------------------
------ -------- -------------- -
------ -
----- ---------
-------- - ----- --
--
-这样，在 action 中就不需要手动定义 type 常量了，CREATE_TODO 会根据 ADD_TODO 自动生成，并使得代码更加简洁。
示例代码
下面是一个完整的使用 actiontypemiddleware 的 Redux 应用示例代码：
Reducer：
-- -------------------- ---- -------
------ - -------- - ---- -------------
----- ------------ - -
------ ---
--
------ ------- -------- ------------------ - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
- ------ --------------------- ---------- ----- --
--
--
--------
------ ------
-
-Actions：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
------ ----- -------- - -----------------------------
------ -------- -------------- -
------ -
----- ---------
-------- - ----- --
--
-Store：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ---------------- ---- ----------------------- ------ ----------- ---- ------------- ----- ---------- - ------------------- ----- ----- - ------------ ------------ --------------------------- -- ------ ------- ------
总结：
actiontypemiddleware 简化了 Redux 应用中 action type 的处理流程，使得代码更加简洁优雅。在实际项目中，使用 actiontypemiddleware 可以让开发者更加专注于业务逻辑，提高编码效率和开发体验，建议在实际项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d181e8991b448e4911