前言
在开发前端应用时，我们经常会使用 Redux 来管理应用的状态。Redux 社区中有许多的中间件，其中一个比较实用的中间件是 redux-semantic-action-middleware，它可以使我们的 Redux action 更具语义化，并统一 action 的格式和命名规范。在本文中，我们将详细讲解如何使用这个 npm 包。
安装
首先，我们需要使用 npm 或 yarn 安装 redux-semantic-action-middleware。
使用 npm 安装：
npm install --save redux-semantic-action-middleware
使用 yarn 安装：
yarn add redux-semantic-action-middleware
使用
在项目中引用 redux-semantic-action-middleware 后，我们需要在 applyMiddleware 中引用它。例如：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------------------ - ---- ----------------------------------- ------ ----------- ---- ------------- ----- ------------------------ - --------------------------------- ----- ----- - ------------ ------------ ----------------------------------------- --
在上面的代码中，我们创建了一个中间件实例，并把它传入了 applyMiddleware 函数，这样就可以在应用中使用这个中间件了。
接下来，我们来创建一个语义化的 action，例如：
import { createAction } from 'redux-actions';
export const ADD_TODO = 'ADD_TODO';
export const addTodo = createAction(ADD_TODO, (text) => ({
text
}));我们可以使用 createAction 工具函数创建一个 action，并指定 ADD_TODO 作为 action type。同时，我们还传入了一个参数 (text) => ({ text })，该参数用于返回 action payload。此时，我们就得到了一个语义化的 action，它的类型是 ADD_TODO，同时还携带了 text 参数。
接下来，我们来修改我们在 reducer 中对应的处理过程。例如：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
------ - -------- - ---- -------------------
----- ------------ - -
------ --
--
------ ------- ---------------
----------- ------- ------- -- --
---------
------ ---------------- ---------------
--
-- --------------在上面的代码中，我们针对 ADD_TODO 类型的 action，修改了 state 中的 todos。注意，在 action 中，我们使用了 action.payload 来获取 text 参数，这是 redux-semantic-action-middleware 自动为我们生成的。
示例
最后，我们来看看一个完整的使用示例。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- ------------- - ---- ----------------
------ - ------------------------------ - ---- -----------------------------------
----- -------- - -----------
------ ----- ------- - ---------------------- ------ -- --
----
----
----- ------------ - -
------ --
--
------ ------- ---------------
----------- ------- ------- -- --
---------
------ ---------------- ---------------
--
-- --------------
----- ------------------------ - ---------------------------------
----- ----- - ------------
------------
-----------------------------------------
--
----------------------------- ---------
----- ----- - -----------------
------------------------- -- -- ----- ------ ------ --在上面的代码中，我们部署了一个 React 应用，在使用了 redux-semantic-action-middleware 后，成功地添加了一个语义化的 action，通过 Redux 的管理，可以成功地修改了应用状态。
【学习意义】
在使用 Redux 管理状态的时候，统一格式和命名规范是一个很重要的问题，这能够使开发过程中的协作更加方便。通过使用 redux-semantic-action-middleware，我们能够方便地创建语义化的 action，统一规范，同时还能使我们的代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8afb