前言
Redux 是一款非常流行的前端状态管理库，它的思想是将应用中的所有状态抽象成一个状态树，并将修改状态的操作统一成一个个可预测的 action。Redux-actions 是专门为 Redux 设计的一个工具集，它提供了一些辅助函数，方便我们创建 Redux 的 action 和 reducer，使得我们更加高效地编写 Redux 应用。
安装
Redux-actions 的安装非常简单，只需要执行以下命令即可：
npm install redux-actions
创建 actions
我们可以使用 createAction 函数来创建一个 action，它会自动创建一个常量为 type 值的 action creator。下面是一个简单的例子：
import { createAction } from 'redux-actions';
export const increment = createAction('INCREMENT');这段代码创建了一个名为 increment 的 action，它的 type 是 'INCREMENT'。我们可以像下面这样使用它：
store.dispatch(increment());
创建 reducers
一个 reducer 是一个纯函数，它接收之前的 state 和 action 作为参数，返回一个新的 state。我们可以使用 handleActions 函数来创建 reducer，它会自动将 action type 对应的 reducer 合并为一个 reducer。下面是一个简单的例子：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
----- ------------ - -
------ --
--
------ ----- -------------- - --------------
-
---------- ------- -- --
------ ----------- - --
---
---------- ------- -- --
------ ----------- - --
---
--
------------
--这段代码创建了一个名为 counterReducer 的 reducer，它处理两种不同的 action type：'INCREMENT' 和 'DECREMENT'。如果收到 'INCREMENT' 的 action，它会将 state.count 加 1；如果收到 'DECREMENT' 的 action，它会将 state.count 减 1。我们可以将这个 reducer 添加到 Redux store 中：
import { createStore } from 'redux';
const store = createStore(counterReducer);处理异步操作
在实际开发中，我们经常会需要处理异步操作，例如获取数据或提交数据等等。Redux-actions 也提供了一些辅助函数来处理异步操作。
createAction
createAction 函数可以接收一个参数，这个参数是一个函数，这个函数可以异步地返回一个结果。例如：
import { createAction } from 'redux-actions';
export const fetchData = createAction('FETCH_DATA', async (url) => {
const response = await fetch(url);
const data = await response.json();
return data;
});上面的代码创建了一个名为 fetchData 的 action，它会异步地从 url 获取数据。我们可以像下面这样使用它：
store.dispatch(fetchData('/api/data'));handleActions
在处理异步操作的 reducer 中，我们通常需要对不同的 action type 采取不同的处理方式。Redux-actions 提供了一个辅助函数 handleActions 来帮助我们编写这样的 reducer。我们可以使用 handleActions 来创建一个 reducer，它会根据 action 的状态来修改状态树。
下面是一个简单的例子，展示如何使用 handleActions 来处理异步操作：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
----- ------------ - -
----- -----
-------- ------
------ -----
--
------ ----- ----------- - --------------
-
------------------- ------- -- --
---------
-------- -----
------ -----
---
------------------- ------- ------- -- --
---------
----- ---------------
-------- ------
---
------------------- ------- ------- -- --
---------
------ ---------------
-------- ------
---
--
------------
--上面的代码创建了一个名为 dataReducer 的 reducer，它处理三种不同的 action type：'FETCH_DATA_REQUEST'、'FETCH_DATA_SUCCESS' 和 'FETCH_DATA_FAILURE'。我们可以将这个 reducer 添加到 Redux store 中：
-- -------------------- ---- ------- ------ - ---------------- ------------ --------------- - ---- -------- ------ ----- ---- -------------- ----- ----------- - ----------------- ----- ------------ --- --- ----- ----- - ------------------------ ------------------------
总结
Redux-actions 的辅助函数提供了很多方便的工具，可以帮助我们更加高效地编写 Redux 应用程序。在实际开发中，使用 Redux-actions 可以减少业务逻辑代码的重复性，并减少一些犯错误的机会。如果你正在编写一个 Redux 应用程序，我强烈建议你使用 Redux-actions。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bdb