如果你正在开发一个前端应用，你很可能已经用过了 Redux 这个 JavaScript 库来管理你应用的状态。Redux 是一个非常流行的状态管理工具，但它也有一些弊端。例如，当你需要处理异步行为的时候，Redux 原生的 Action 和 Reducer 模型就显得不太好用了。
这时候我们可以用一个 NPM 包叫做 redux-thunk-action-reducer 来简化我们的异步处理。下面是一个使用 redux-thunk-action-reducer 去请求数据的例子：
-- -------------------- ---- -------
------ - ------------- ------------------ ------------- - ---- -----------------------------
------ ----- -------- - ------------------------------ ----- -- -- -
----- -------- - ----- ----------------
----- ----- - ----- ----------------
------ ------
---
------ ------- --------------
- ------ --- -------- ------ ------ ---- --
-
------------------- ----- -- -- --------- -------- ---- ---
------------------- ------- ------- -- --
---------
------ ---------------
-------- -----
---
------------------- ------- ------- -- --
---------
------ ---------------
-------- -----
--
-
--我们来详细解释一下这个例子的每个部分。
创建一个异步 Action
异步 Action 和普通的 Action 最大的区别就是它返回的不是一个对象，而是一个函数。这个函数可以接受两个参数：dispatch 和 getState。dispatch 用来触发一个新的 Action，而 getState 则可以获取到 Redux 的当前状态。
这里我们用 redux-thunk-action-reducer 中的 createAsyncAction 工具函数来创建一个异步 Action。
export const getTodos = createAsyncAction('GET_TODOS', async () => {
const response = await fetch('/todos');
const todos = await response.json();
return todos;
});在这里我们使用了 async 和 await 来简化异步处理。createAsyncAction 的第一个参数是 Action 的 type，而第二个参数则是返回一个 Promise 的函数，这个函数会在 Action 被触发时被执行。
创建一个 Reducer
我们使用 createReducer 工具函数来创建一个 Reducer：
-- -------------------- ---- -------
------ ------- --------------
- ------ --- -------- ------ ------ ---- --
-
------------------- ----- -- -- --------- -------- ---- ---
------------------- ------- ------- -- --
---------
------ ---------------
-------- -----
---
------------------- ------- ------- -- --
---------
------ ---------------
-------- -----
--
-
--createReducer 接受两个参数：初始状态和一个 Action 到状态的映射。我们使用了 ES6 的解构语法来设置初始状态，并为每个异步 Action 设置了 REQUEST、SUCCESS 和 FAILURE 三个状态。
添加 Redux 中间件
为了让 Redux 支持异步 Action，我们需要添加一些叫做 middleware（中间件） 的东西。在 createAsyncAction 内部，redux-thunk-action-reducer 帮我们自动添加了异步支持所需要的 middleware，但是我们还需要手动添加一个 logger middleware。
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers';
import logger from 'redux-logger';
const store = createStore(reducer, applyMiddleware(logger));发起请求
一旦我们定义了我们的异步 Action，我们就可以像调用普通的 Action 一样去调用它：
store.dispatch(getTodos());
这个函数会返回一个 Promise，你可以使用 async 和 await 来等待它完成。
总结
在本文中，我们主要介绍了 redux-thunk-action-reducer 这个 NPM 包的使用方法。它能够帮助我们简化 Redux 应用中处理异步行为的代码，并在保留原有 Action 和 Reducer 模型的基础上给我们更多的自由度。我们希望这篇文章能够帮助你学习 Redux 异步操作的处理方式，从而更好地搭建你的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa981e8991b448d831a