在前端开发中，我们常常使用Redux来管理应用的状态。Redux是一个基于 Flux 设计模式的状态管理工具，它帮助我们管理应用中所有的状态。但是，Redux代码比较冗长，每个action都要写一遍type以及对应的创建action方法，这增加了代码的复杂度。Redux Simple Action Helpers这个npm包就是为了减少Redux中action的代码量。
简介
Redux Simple Action Helpers 提供一系列的 action helpers，用于简化 Redux 中 action 的创建。这些 helpers 消除了一些模板代码，并提供了一些额外的参数，使创建action变得更加容易。通过使用这个包，我们可以提高代码的可读性和可维护性。
安装
使用 npm 安装这个包：
npm install redux-simple-action-helpers
使用
首先，我们需要引入redux和redux-simple-action-helpers：
import { createStore } from 'redux';
import { createAction } from 'redux-simple-action-helpers';接着，我们创建一个 Redux store：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------现在，我们可以使用 createAction 函数来创建action：
const increment = createAction('INCREMENT');
const decrement = createAction('DECREMENT');创建的action函数是纯函数，接收一个参数并返回一个对象。这个对象包含了一个type字段和一些其他的字段。例如，我们可以创建一个带有payload的action：
const addTodo = createAction('ADD_TODO', 'text');
addTodo('Buy milk');
// => { type: 'ADD_TODO', text: 'Buy milk' }我们还可以通过一个 reducer 把 actions 映射成 state：
-- -------------------- ---- -------
----- ------------ - ---
-------- ----------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- ------------
---------- -----
-
--
---- --------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
--
-
------ -----
---
--------
------ ------
-
-
----- ------- - -----------------
-----
---
----- ----- - ---------------------现在我们可以在React组件中使用action了：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- -------- ------- --------------- -
-------- -
----- - ------ ------- - - -----------
------ -
-----
----
--------------- --
--- ------------------------------
--
-----
------- ----------- -- ------------ ----------- -------------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -
-------
-
------ ------- ------------------------ ------------------------------这里我们使用redux的connect函数，将state和action绑定到React组件中。
总结
Redux Simple Action Helpers 是一个非常简单但实用的包。它可以大大简化 Redux 中 action 的创建过程，并且提高代码的可读性和可维护性。在你的下一个 Redux 项目中，尝试使用这个包，看看它是否能为你带来便利吧。
示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------ - ---- ------------------------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- --------- - --------------------------
----- --------- - --------------------------
----- ----- - ---------------------
------------------ -- -
------------------------------
---
----------------------------
----------------------------
----------------------------本示例代码实现了一个计数器。在示例中，我们使用了 createAction 函数来创建 action。我们还可以看到，在调用 action 函数时，不需要传递任何参数，因为我们已经在 createAction 函数中定义了所需的所有参数。最后，我们使用 store.dispatch 函数来分派 action，并通过 store.subscribe 函数监听 state 的变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e98
