@jeremejevs/redux-thunk 是一个非常常用的 React 和 Redux 开发库，用于处理 Redux 中的异步操作。在本教程中，我们将学习如何使用 @jeremejevs/redux-thunk 来处理 Redux 中的异步操作。
什么是 Redux Thunk？
@jeremejevs/redux-thunk 是 Redux 中的一个中间件，用于处理异步操作。它允许我们在 Redux 中分发一个异步的 Action，并在异步操作完成后再更新 Redux Store 的状态。
通常情况下，Redux 中的 Action 应该是同步操作，但有时我们需要在 Action 中执行异步操作，例如调用 API、进行异步计算等等。这时，Redux 中的同步操作就无法满足我们的需求了。@jeremejevs/redux-thunk 就是为了解决这个问题而存在的。
安装和使用
使用 @jeremejevs/redux-thunk 非常简单，只需要在我们的项目中安装这个依赖即可。
npm install @jeremejevs/redux-thunk
安装完成后，我们需要在 Redux 的 createStore 方法中使用 applyMiddleware 来将 @jeremejevs/redux-thunk 中间件添加到我们的 Redux 应用程序中。
import { createStore, applyMiddleware } from 'redux';
import thunk from '@jeremejevs/redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));接下来，我们就可以在 Redux 的 Action 中执行异步操作了。让我们来看一个实际的例子：
-- -------------------- ---- -------
------ ----- ---------- - -- -- -
-- ---------
------ ---------- --------- -- -
-- ----------- ---
------------------------------------- -- -
-- --------- ----- ----- ---
---------- ----- ---------------------- -------- ------------- ---
---
--
--在上面的例子中，我们定义了一个 fetchPosts 的 Action，返回的是一个函数。在这个函数中，我们可以进行异步操作，例如调用 API。异步操作执行成功后，我们再通过 Redux Store 的 dispatch 方法来更新状态。
回调函数和异步结果
除了在异步操作完成后更新 Redux Store 的状态外，@jeremejevs/redux-thunk 中间件还支持在异步操作完成后执行回调函数。
来看下面的例子，我们定义了一个 fetchPostsAndExecuteCallback 的 Action，它首先会调用 fetchPosts 方法来获取 Posts 数据，然后执行回调函数 callback：
export const fetchPostsAndExecuteCallback = (callback) => {
return (dispatch, getState) => {
axios.get('/api/posts').then(response => {
dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: response.data });
callback();
});
};
};在上面的例子中，我们将 callback 作为一个参数传递给了 fetchPostsAndExecuteCallback 方法。在异步操作完成后，我们会执行这个回调函数。
除了回调函数外，@jeremejevs/redux-thunk 中间件还支持通过 Promise 返回异步操作的结果。来看下面的例子，我们定义了一个 fetchPostsAndReturnPromise 的 Action，它会返回一个 Promise 对象：
export const fetchPostsAndReturnPromise = () => {
return (dispatch, getState) => {
return axios.get('/api/posts').then(response => {
dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: response.data });
return response.data;
});
};
};在上面的例子中，我们通过 return 返回了一个 Promise 对象。在异步操作完成后，Promise 会返回异步操作的结果。我们可以使用 then 方法来处理这个结果。
总结
本教程介绍了 @jeremejevs/redux-thunk 中间件的基本用法和实际应用。通过使用 @jeremejevs/redux-thunk，我们可以在 Redux 中处理异步操作，并且可以非常方便地执行回调函数和获取异步操作的结果。希望这篇教程能够对你的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbcdc