在开发前端项目时，Redux 通常是不可或缺的一部分，他帮助我们管理全局状态和页面状态，帮助我们更加灵活地控制数据流动。在 Redux 的使用过程中，Action 是最基础的部分之一，它是用来描述一些事件的发生。
不过，Redux 中的 action 语法上有一点糟糕，这会导致我们写的 action 特别冗长。而 simplify-action-middleware 这个 npm 包，则是为了解决这个问题而出现的。
安装
在使用 simplify-action-middleware 之前，我们先将其安装到项目中。
npm install --save simplify-action-middleware
在安装之后，我们需要在 createStore 的入口文件中加入代码来启用中间件，代码如下：
import { createStore, applyMiddleware } from 'redux'
import simplifyAction from 'simplify-action-middleware'
import rootReducer from './reducers'
const store = createStore(rootReducer, applyMiddleware(simplifyAction))如果有需要，也可以手动定制 action 前缀，代码如下：
const store = createStore(
rootReducer,
applyMiddleware(simplifyAction({
prefix: '@my-app/'
}))
)语法示例
simplify-action-middleware 提供了一种更加简单的 action 语法，只需要传递一个对象并使用点表示法，就可以将它转化为完整的 Redux action 对象。
通常，一个 Redux action 需要包含一个“type”属性，并且还需要传递一些“payload”数据。如果仅仅是这样，那么这个 action 的写法就已经够繁琐了。而 simplify-action-middleware 则是将“type”和“payload”合并到了一起，在实际的代码中使用更加方便。
下面是一个示例：
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------------
----- -------------- - --------------------------------------
----- -------------- - --------------------------------------
----- --------------- - ---------------------------------------
----- ----- - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------- -
----- - ----- ----- - - --------------
------ -
---------
-------- - ----- ----- -
-
-
---- --------------- -
----- - ----- - - --------------
------ -
---------
-----
-
-
---- ---------------- -
------ -
---------
------ ----
-
-
--------
------ -----
-
-如上所示，我们可以使用“createSimplifyAction”创建一个 Redux action。它完全替代了我们通常写的 action。
当然，我们还可以使用自定义的前缀。例如：
import { createSimplifyAction } from 'simplify-action-middleware'
const UPDATE_PROFILE = createSimplifyAction('UPDATE_PROFILE', 'MY_APP')
console.log(UPDATE_PROFILE.type) // '@MY_APP/UPDATE_PROFILE'此时，我们创建的 action 由自带前缀“@MY_APP/”。
指导意义
simplify-action-middleware 的使用使你在 Redux 的开发中，能够更快地编写，更快地理解和重构。同时，使用全局统一的 action 也可以减少代码中硬编码的实例。函数createSimplifyAction可以使用小写的字母和下划线，原则上使用简洁的命名方式即可。
总结来说，使用 simplify-action-middleware 之后，您可以获得以下优点：
- 去掉了繁琐的常规写法，极大地简化了语法。
- 更好的可读性，极大地帮助我们理解 action。
- 更精简的代码，减少硬编码的实例。
作为一名前端开发者，学会使用 simplify-action-middleware 并将其应用于项目实践中，将会成为您技术增长路上的有力助推。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822b6c