＆＃34;动作必须是普通对象。使用自定义中间件进行异步操作。＆＃34;与react / redux

Question

我遇到了这个错误，并花了最后几个小时试图找出它。我看过所有看似重复的问题 - 但他们没有解决这个问题。

在我的react / redux应用程序中，当我在我的某个操作中发出ajax请求时，它会抛出此错误： Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

我的商店创建如下：

＆＃13;

＆＃13;

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)
));

＆＃13;

＆＃13;

＆＃13;

相关的缩减器如下所示：

＆＃13;

＆＃13;

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, isLoading: false, payload: action.payload, error: void 0 };

		case actions.VEHICLE_LOOKUP_FAILURE:
			return { ...state, isLoading: false, error: action.error, response: void 0 };

		default: return state;
	}
}

＆＃13;

＆＃13;

＆＃13;

相关行动如下：

＆＃13;

＆＃13;

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 };
}

＆＃13;

＆＃13;

＆＃13;

我的软件包版本是：

"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",

Answer 1

首先想到的是，您的fetchVehicleLookup行动正在呻吟，因为您正在返回axios而不是仅仅在内部调度。

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)));
    };
}

只需删除操作中的return语句，因为它返回了axios所代表的任何对象，我想这将是某种形式的Promise。

您的商店设置可能会出现第二个想法，因为听起来thunk实际上并不起作用。

Answer 2

我设法弄清楚了 - 经过与@ Glitch100的长时间聊天（谢谢！）。我需要在创建axios promise之后立即返回requestVehicleLookup的调度。像这样：

＆＃13;

＆＃13;

export function fetchVehicleLookup(vrm: string, jwt: string) {
	return function (dispatch) {
		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)));
      
      
		return dispatch(requestVehicleLookup());
	};
}

＆＃13;

＆＃13;

＆＃13;