TypeScript忽略Thunk未处理的拒绝(错误):操作必须是纯对象。使用自定义中间件进行异步操作。
在使用Redux等状态管理库进行异步操作时,常常会遇到Thunk未处理的拒绝错误。这个错误通常是由于在Redux中使用了异步操作,但Thunk中间件未正确处理异步操作导致的。
解决这个问题的方法是使用自定义中间件来处理异步操作。自定义中间件可以通过拦截Redux的action,并在异步操作完成后再次派发一个新的action来解决这个问题。
以下是一个示例的自定义中间件代码:
const asyncMiddleware = (store: any) => (next: any) => (action: any) => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return next(action);
};
export default asyncMiddleware;
在上述代码中,我们定义了一个名为asyncMiddleware的自定义中间件。它接受Redux store作为参数,并返回一个函数,该函数接受next和action作为参数。
在这个自定义中间件中,我们首先检查action的类型是否为函数。如果是函数类型,说明这是一个异步操作,我们就调用这个函数,并传入store.dispatch和store.getState作为参数。这样可以在异步操作完成后再次派发一个新的action。
如果action的类型不是函数,说明这是一个普通的action,我们就直接调用next(action)将其传递给下一个中间件或Redux的reducer进行处理。
使用这个自定义中间件的方法是,在创建Redux store时将其作为applyMiddleware的参数传入:
import { createStore, applyMiddleware } from 'redux';
import asyncMiddleware from './asyncMiddleware';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(asyncMiddleware));
通过以上步骤,我们就可以解决TypeScript忽略Thunk未处理的拒绝错误,并且能够正常进行异步操作了。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云