在 TypeScript 中,Redux Thunk 是一个中间件,用于处理异步操作。当我们在一个 Thunk 中调用另一个 Thunk 时,我们希望等待被调用的 Thunk 执行完毕后再执行当前 Thunk 中的承诺(Promise)。
要实现这个功能,可以使用 async/await 或者 Promise 的方式来处理。
使用 async/await 的方式:
以下是一个示例代码:
import { ThunkAction } from 'redux-thunk';
import { RootState } from './store';
// 定义一个异步操作的 Thunk
const asyncThunk = (): ThunkAction<void, RootState, unknown, Action> => async (dispatch) => {
// 异步操作代码
await someAsyncFunction();
dispatch(someAction());
};
// 当前 Thunk
const currentThunk = (): ThunkAction<void, RootState, unknown, Action> => async (dispatch) => {
// 执行其他同步操作
// 调用另一个 Thunk
await dispatch(asyncThunk());
// 继续执行当前 Thunk 中的承诺
dispatch(someOtherAction());
};
使用 Promise 的方式:
以下是一个示例代码:
import { ThunkAction } from 'redux-thunk';
import { RootState } from './store';
// 定义一个异步操作的 Thunk
const asyncThunk = (): ThunkAction<void, RootState, unknown, Action> => (dispatch) => {
// 返回一个 Promise 对象
return new Promise((resolve) => {
// 异步操作代码
someAsyncFunction().then(() => {
dispatch(someAction());
resolve();
});
});
};
// 当前 Thunk
const currentThunk = (): ThunkAction<void, RootState, unknown, Action> => (dispatch) => {
// 执行其他同步操作
// 调用另一个 Thunk
return dispatch(asyncThunk()).then(() => {
// 继续执行当前 Thunk 中的承诺
dispatch(someOtherAction());
});
};
这样,无论是使用 async/await 还是 Promise 的方式,都可以等待从 TypeScript 中的另一个 Thunk 调用时执行承诺的 Redux Thunk。
领取专属 10元无门槛券
手把手带您无忧上云