在 React 应用程序中使用 Redux 进行状态管理通常涉及到异步操作。Redux Thunk 是一个流行的 npm 包，它允许我们在 Redux 中处理异步逻辑，例如从 API 获取数据或调度其他动作。
安装和配置
要使用 Redux Thunk，我们需要将其作为应用程序的依赖项安装。可以通过以下命令来完成：
npm install redux-thunk
然后，在创建 Redux store 时，我们需要将 redux-thunk middleware 配置到中间件链中。这可以通过以下方式完成：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));使用 Redux Thunk 处理异步操作
Redux Thunk 允许我们在 Redux 中编写具有副作用的代码（例如API调用），并且它非常易于使用。让我们看看如何使用 Redux Thunk 来处理异步操作。
创建 Action Creator 函数
首先，我们需要创建一个 action creator 函数，以便我们的组件可以触发该函数并将结果分派给 Redux store。由于我们要处理异步操作，因此该函数必须返回另一个函数，而不是对象。这个返回的函数将接收两个参数：dispatch 和 getState。
下面是一个示例 action creator 函数：
function fetchProducts() {
return function(dispatch) {
fetch('https://api.example.com/products')
.then(response => response.json())
.then(data => dispatch({ type: 'FETCH_PRODUCTS_SUCCESS', payload: data }));
};
}在上面的示例中，我们使用 fetch 来获取一个 API 的响应，然后将返回的数据分派给 Redux store。
调度 Action Creator 函数
现在我们可以从组件中调度 action creator 函数。由于它是异步操作，因此我们需要在组件中使用 dispatch 函数（这是通过 react-redux 提供的）来触发调度。这就是为什么我们在 action creator 函数中接收 dispatch 参数的原因。
下面是一个示例组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------- - ---- ------------
-------- ---------- -
----- -------- - --------------
----- -------- - ----------------- -- ----------------
------------ -- -
--------------------------
-- ----
------ -
-----
--------------------- -- -
---- -------------------------------------
---
------
--
-
------ ------- ---------在上面的示例中，我们使用 useDispatch hook 来获取 dispatch 函数。我们也使用 useSelector hook 来选择从 Redux store 中检索的数据。
在组件加载时，我们在 useEffect hook 中调用 dispatch(fetchProducts())，以便在组件渲染之前获取所有产品。
结论
Redux Thunk 是处理 Redux 应用程序中的异步逻辑的强大工具。通过遵循本文中的指南，您可以使用 Redux Thunk 轻松地在您的应用程序中处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32589
