加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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实际上没有工作.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读