Redux 是一种流行的 JavaScript 应用程序状态管理库。它提供了一种可预测的状态管理方式，使得应用程序的状态更容易管理和调试。在 Redux 中，action 是一个简单的 JavaScript 对象，用于描述应用程序中发生的事件。异步 action 是一种特殊的 action，它允许应用程序在异步操作完成后更新状态。本文将介绍 Redux 异步 action 的最佳实践。
为什么需要异步 action
在应用程序中，有很多操作需要进行异步处理。例如，向服务器发送请求、从服务器获取数据、处理用户输入等等。如果所有操作都是同步的，那么应用程序将变得非常缓慢，甚至无法响应用户。因此，异步操作是必须的。
在 Redux 中，action 是同步的。这意味着当你调用一个 action 时，它会立即返回一个对象，然后 reducer 会立即更新状态。这对于同步操作非常方便，但对于异步操作来说，它并不适用。如果你在 action 中执行异步操作，它将无法同步更新状态，因为 action 已经完成并返回了一个对象。
为了解决这个问题，Redux 提供了一种机制，允许你在异步操作完成后更新状态。这个机制就是异步 action。
Redux 异步 action 的最佳实践
使用 Redux Thunk 中间件
Redux Thunk 是 Redux 的一个中间件，它允许 action 创建函数返回一个函数而不是一个对象。这个函数可以在异步操作完成后调用 dispatch，并更新状态。
要使用 Redux Thunk，你需要在创建 store 时将它作为中间件传递给 applyMiddleware 函数。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));现在你可以创建一个异步 action 创建函数，它返回一个函数而不是一个对象。
-- -------------------- ---- -------
------ ----- --------- - -- -- -
------ -------- -- -
---------- ----- -------------------- ---
-------------------------------------
-------------- -- ----------------
---------- -- ---------- ----- --------------------- -------- ---- ---
------------ -- ---------- ----- --------------------- -------- ----- ----
--
--在这个例子中，fetchData 函数返回一个函数，这个函数接收一个 dispatch 参数。在这个函数中，我们首先调用 dispatch，发送一个 FETCH_DATA_REQUEST action，表示数据正在加载中。然后我们使用 fetch 函数获取数据，并在获取数据后调用 dispatch，发送 FETCH_DATA_SUCCESS action 或 FETCH_DATA_FAILURE action，表示数据已经加载完成或加载失败。
使用 async/await
除了 Redux Thunk，你还可以使用 async/await 来处理异步操作。在这种情况下，你不需要 Redux Thunk 中间件。
-- -------------------- ---- -------
------ ----- --------- - -- -- -
------ ----- -------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- ---
- ----- ------- -
---------- ----- --------------------- -------- ----- ---
-
--
--在这个例子中，fetchData 函数返回一个 async 函数，这个函数接收一个 dispatch 参数。在这个函数中，我们首先调用 dispatch，发送一个 FETCH_DATA_REQUEST action，表示数据正在加载中。然后我们使用 fetch 函数获取数据，并使用 await 关键字等待数据。在获取数据后，我们调用 dispatch，发送 FETCH_DATA_SUCCESS action 或 FETCH_DATA_FAILURE action，表示数据已经加载完成或加载失败。
使用 Redux Saga
Redux Saga 是 Redux 的另一个中间件，它提供了一种更强大的异步操作处理方式。它使用 generator 函数来处理异步操作，使得代码更加简洁和易于理解。
要使用 Redux Saga，你需要在创建 store 时将它作为中间件传递给 applyMiddleware 函数。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------------------ --------------------------------- -----------------------------
现在你可以创建一个 saga，它处理异步操作，并在操作完成后调用 dispatch。
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
--------- ----------------- -
--- -
----- ----- ----- -------------------- ---
----- ---- - ----- ----------- --------------------------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- -------- ----- ---
-
-
--------- ---------- -
----- ----------------------- -----------
-
------ ------- ---------在这个例子中，fetchData saga 处理 FETCH_DATA action，并使用 put 函数调用 dispatch，发送 FETCH_DATA_REQUEST action。然后它使用 call 函数调用 fetch 函数，获取数据。在获取数据后，它再次使用 put 函数调用 dispatch，发送 FETCH_DATA_SUCCESS action 或 FETCH_DATA_FAILURE action，表示数据已经加载完成或加载失败。
总结
Redux 异步 action 是处理异步操作的一种最佳实践。你可以使用 Redux Thunk、async/await 或 Redux Saga 来处理异步操作。无论你选择哪种方式，都需要遵循一些最佳实践，例如发送请求前发送一个请求 action、请求成功后发送一个成功 action、请求失败后发送一个失败 action 等等。这些实践可以使你的代码更加可读、可维护和可测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650ac18f95b1f8cacd51d16e