reactjs – “动作必须是普通的对象.使用自定义中间件进行异步操
发布时间:2020-12-15 05:04:17 所属栏目:百科 来源:网络整理
导读:我遇到了这个错误,花了最后几个小时试图找出它.我看过所有看似重复的问题 – 但它们并没有解决问题. 在我的react / redux应用程序中,当我在我的一个操作中发出ajax请求时,它会抛出此错误: 未捕获的错误:操作必须是普通对象.使用自定义中间件进行异步操作.
我遇到了这个错误,花了最后几个小时试图找出它.我看过所有看似重复的问题 – 但它们并没有解决问题.
在我的react / redux应用程序中,当我在我的一个操作中发出ajax请求时,它会抛出此错误: 我的商店创建如下: import { composeWithDevTools } from 'redux-devtools-extension'; import reducers from './reducers'; import thunkMiddleware from 'redux-thunk'; import { applyMiddleware,createStore } from 'redux'; export default createStore(reducers,composeWithDevTools( applyMiddleware(thunkMiddleware) )); 相关的减速器看起来像这样: import * as actions from './../../actions/tools/vehicle-lookup'; const defaultState = { vrm: void 0,isLoading: false,response: void 0,error: void 0,}; export default function (state = defaultState,action) { switch (action.type) { case actions.VEHICLE_LOOKUP: return { ...state,isLoading: true,vrm: action.vrm }; case actions.VEHICLE_LOOKUP_SUCCESS: return { ...state,payload: action.payload,error: void 0 }; case actions.VEHICLE_LOOKUP_FAILURE: return { ...state,error: action.error,response: void 0 }; default: return state; } } 相关行动如下: import axios from 'axios'; export const VEHICLE_LOOKUP = 'VEHICLE_LOOKUP'; export const VEHICLE_LOOKUP_SUCCESS = 'VEHICLE_LOOKUP_SUCCESS'; export const VEHICLE_LOOKUP_FAILURE = 'VEHICLE_LOOKUP_FAILURE'; export function fetchVehicleLookup(vrm: string,jwt: string) { return function (dispatch) { dispatch(requestVehicleLookup()); axios.create({ timeout: 4000,}) .post('/*api url*',{ action: '*method*',body: { vrm },}) .then(response => response.data) .then(json => dispatch(receiveVehicleData(json))) .catch(error => dispatch(receiveVehicleDataFailure(error))); }; } function requestVehicleLookup() { return { type: VEHICLE_LOOKUP }; } function receiveVehicleData(payload: object) { return { type: VEHICLE_LOOKUP_SUCCESS,payload }; } function receiveVehicleDataFailure(error: object) { return { type: VEHICLE_LOOKUP_FAILURE,error }; } 我的包版本是: "axios": "^0.16.0","react": "^15.4.2","react-addons-css-transition-group": "^15.5.0","react-addons-transition-group": "^15.5.0","react-dom": "^15.4.2","react-hot-loader": "^3.0.0-beta.6","react-redux": "^5.0.3","react-router": "^4.0.0","react-router-dom": "^4.0.0","redux": "^3.6.0","redux-devtools-extension": "^2.13.0","redux-promise": "^0.5.3","redux-promise-middleware": "^4.2.0","redux-thunk": "^2.2.0",
首先想到的是你的fetchVehicleLookup动作正在呻吟,因为你正在返回axios而不是仅仅在内部调度.
export function fetchVehicleLookup(vrm: string,jwt: string) { return function (dispatch) { dispatch(requestVehicleLookup()); axios.create({ timeout: 4000,}) .post('/*api url*',{ action: '*method*',}) .then(response => response.data) .then(json => dispatch(receiveVehicleData(json))) .catch(error => dispatch(receiveVehicleDataFailure(error))); }; } 只需删除操作中的return语句,因为它返回axios所代表的任何对象,我想这将是某种形式的Promise. 第二个想法可能是你的商店设置周围的事情,因为它听起来像thunk实际上没有工作. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |