[英]“Actions must be plain objects. Use custom middleware for async actions.” with react/redux
I've encountered this error and spent the last few hours trying to figure it out. 我遇到了这个错误,花了最后几个小时试图找出它。 I've looked at all the questions that appear to be duplicates - but they don't solve the issue. 我看过所有看似重复的问题 - 但它们并没有解决问题。
In my react/redux app, when I made an ajax request in one of my actions, it throws this error out: Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
在我的react / redux应用程序中,当我在我的一个操作中发出ajax请求时,它会抛出此错误: Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
My store creation looks like this: 我的商店创建如下:
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) ));
The relevant reducer looks like this: 相关的减速器看起来像这样:
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; } }
The relevant action looks like this: 相关行动如下:
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 }; }
My package versions are: 我的包版本是:
"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",
First thought was that your fetchVehicleLookup
action was moaning because you are returning the axios
instead of just dispatching within. 首先想到的是你的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)));
};
}
Simply remove the return
statement that is in your action, as it's returning whatever object axios represents, which I imagine is going to be some form of Promise
. 只需删除操作中的return
语句,因为它返回axios所代表的任何对象,我想这将是某种形式的Promise
。
Second thought could be something around your store setup because it sounds like thunk
isn't actually working. 第二个想法可能是你的商店设置周围的事情,因为它听起来像thunk
实际上没有工作。
I managed to figure it out - after a very long chat with @Glitch100 (thanks!). 经过与@ Glitch100的长时间聊天(感谢!),我设法弄明白了。 I needed to return the dispatch of requestVehicleLookup just after the axios promise was created. 我需要在创建axios promise之后立即返回requestVehicleLookup的调度。 Like so: 像这样:
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()); }; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.