Redux 是一个非常流行的 JavaScript 应用程序状态管理库。然而，Redux 的使用可能会变得繁琐和冗长。这是因为 Redux 存在许多不必要的样板代码和仪式，例如定义 action types 和编写 actions。为了解决这个问题，社区创建了许多构建在 Redux 之上的封装包，其中之一就是 redux-actions。
安装
首先，你需要通过 npm 安装 redux-actions：
npm install --save redux-actions
创建 action
使用 redux-actions 帮助我们简化了 action 的创建流程。下面是一个示例：
import { createAction } from 'redux-actions';
const ADD_TODO = 'todos/ADD_TODO';
export const addTodo = createAction(ADD_TODO);上面的代码创建了一个名为 addTodo 的 action。根据 Redux 的标准格式，它将被发送到 reducer 中，并且 reducer 可以根据这个 action 来更新 store 的状态。
我们可以像下面这样在组件中调用 addTodo action：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
----- -------- ------- --------------- -
----------- - -- -- -
----------------------- -------
--
-------- -
------ -
-----
------- ------------------------------ -------------
------
--
-
-
------ ------- ------------- - ------- -------------上面的代码使用了 React 和 Redux 的连接器。我们将 addTodo action 作为一个属性传递给组件，并且在组件中调用它。
处理 payload
在有些情况下，我们需要发送一些数据到 reducer 中。例如，当用户提交一个表单时，我们需要将表单中的数据作为 payload 一起发送到 store 中。使用 redux-actions 可以轻松处理这种情况。
下面是一个带有 payload 的示例：
import { createAction } from 'redux-actions';
const ADD_TODO = 'todos/ADD_TODO';
export const addTodo = createAction(ADD_TODO, text => ({ text }));上面的代码将一个函数作为 createAction 的第二个参数。这个函数将接收一个参数作为 payload，并将其包装到一个对象中返回。
我们可以像下面这样在组件中调用 addTodo action 并发送一个带有文本内容的对象：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
----- -------- ------- --------------- -
----- - -
----- --
--
------------ - - -- -
-------------------
--------------------
----- ---------------
---
--
------------ - - -- -
---------------
----- --------------
---
--
-------- -
------ -
----- -----------------------------
------ ----------- ----------------------- ---------------------------- --
------- ----------------- -------------
-------
--
-
-
------ ------- ------------- - ------- -------------处理错误
有些情况下，我们需要处理异步操作或网络请求返回的错误。使用 redux-actions 可以轻松处理这种情况。
下面是一个带有错误处理的示例：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ---------------- - -------------------------
----- ---------------- - -------------------------
----- ---------------- - -------------------------
------ ----- -------------- - -------------------------------
------ ----- -------------- - -------------------------------
------ ----- -------------- - -------------------------------
------ -------- ------------- -
------ -------- -- -
---------------------------
------ ------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ---- --
--
--------- -- -----------
---------- -- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------