在前端开发中，我们经常需要处理异步请求，如发送 API 请求或通过 WebSocket 接收实时数据。Redux-thunk 是一个常用的 Redux 中间件，能够让我们在 Redux 中方便地处理异步请求。
Redux-thunk 简介
Redux-thunk 是一个 Redux 中间件，用于处理异步请求。它允许 action creators 返回一个函数，而不是只能返回一个简单的 actions 对象。这个函数可以在内部执行异步请求并 dispatch 不同的 actions 对象来更新 Redux store。
安装 Redux-thunk
安装 Redux-thunk 很简单，只需要通过 npm 或 yarn 安装即可。
npm install redux-thunk
yarn add redux-thunk
配置 Redux-thunk
在 Redux 中使用 Redux-thunk 需要进行相应的配置。我们需要创建一个中间件来引入 Redux-thunk，并将这个中间件作为参数传递给 Redux createStore 函数。
import { createStore, applyMiddleware } from 'redux'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore( rootReducer, applyMiddleware(thunkMiddleware) );
Redux-thunk 示例
下面我们将展示如何使用 Redux-thunk 实现一个简单的异步请求。
假设我们的应用程序需要从 API 中获取一些数据并更新 Redux store。我们可以创建一个 action creator，它返回一个函数而不是一个 actions 对象。这个函数在被 dispatch 时将被 Redux-thunk 中间件调用。
-- -------------------- ---- ------- ------ ----- --------- - -- -- - ------ -------- -- - --------------------------- ------ ------------------------------------- ------------------- --------- -- ----------- ---------- -- - --------------------------------- ------ ----- -- ------------ -- ----------------------------------- -- --展开代码
这个函数将依次执行以下操作：
- dispatch 一个数据获取的开始 action。
- 发送 API 请求并处理响应。
- 如果成功，dispatch 一个数据获取的成功 action，并返回 JSON 数据。
- 如果失败，dispatch 一个数据获取的失败 action。
我们还需要定义这些 action。
-- -------------------- ---- ------- ------ ----- ---------------- - ------------------- ------ ----- ------------------ - --------------------- ------ ----- ------------------ - --------------------- ------ ----- -------------- - -- -- -- ----- ---------------- --- ------ ----- ---------------- - ---- -- -- ----- ------------------- -------- - ---- - --- ------ ----- ---------------- - ----- -- -- ----- ------------------- -------- - ----- - ---展开代码
我们还需要定义 reducer 来处理这些 action，并更新 Redux store 的状态。
-- -------------------- ---- ------- ------ - ----------------- ------------------- ------------------ - ---- ------------------------- ----- ------------ - - ----- --- -------- ------ ------ ---- -- ------ ------- -------- ----------------- - ------------- ------- - ------------------- - ---- ----------------- ------ - --------- -------- ----- ------ ---- -- ---- ------------------- ------ - --------- -------- ------ ----- ------------------- -- ---- ------------------- ------ - --------- -------- ------ ------ --------------------- ----- -- -- -------- ------ ------ - -展开代码
这个 reducer 处理三种 action，分别是 FETCH_DATA_BEGIN、FETCH_DATA_SUCCESS 和 FETCH_DATA_FAILURE。它们分别更新了 loading、data 和 error 状态。
最后我们需要将这些定义好的 action 和 reducer 引入到组件中，并通过 connect 函数实现组件与 Redux store 的连接。
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - --------- - ---- ------------------------- ----- -------- - -- ----- -------- ------ --------- -- -- - ------------ -- - ------------ -- ------------- -- --------- - ------ ---------------------- - -- ------- - ------ ----------- ---------------------- - ------ - ---- -------------- -- - --- ------------------------------ --- ----- -- -- ----- --------------- - ----- -- -- ----- ----------- -------- -------------- ------ ----------- --- ------ ------- -------- ---------------- - --------- - ------------展开代码
在这个组件中，我们定义了一个 fetchData props，它通过 connect 函数的 mapDispatchToProps 参数将 fetchData action 和组件连接起来。我们通过 useEffect hook 来在组件挂载后调用这个 props。
小结
使用 Redux-thunk 可以方便我们在 Redux 应用中处理异步请求，并更好地组织我们的代码。在本文中，我们介绍了 Redux-thunk 的基本原理，并通过一个简单的示例代码展示了如何使用它。相信读完本文，你能更深入地理解 Redux-thunk 的用法和原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bce789a231b2b7eded249f
