「操作必須是普通對象，使用自定義中間件進行異步操作。」與反應/ redux

Question

我遇到了這個錯誤，並花了最後幾個小時試圖弄清楚。我查看了所有似乎都是重複的問題 - 但它們不能解決問題。

在我的反應/終極版的應用程序，當我在我的行動之一提出一個Ajax請求時，它拋出這個錯誤了： Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

我的商店創建看起來是這樣的：

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(
 
\t applyMiddleware(thunkMiddleware) 
 
));

相關的減速器是這樣的：

import * as actions from './../../actions/tools/vehicle-lookup'; 
 

 
const defaultState = { 
 
\t vrm: void 0, 
 
\t isLoading: false, 
 
\t response: void 0, 
 
\t error: void 0, 
 
}; 
 

 
export default function (state = defaultState, action) { 
 
\t switch (action.type) { 
 
\t \t case actions.VEHICLE_LOOKUP: 
 
\t \t \t return { ...state, isLoading: true, vrm: action.vrm }; 
 

 
\t \t case actions.VEHICLE_LOOKUP_SUCCESS: 
 
\t \t \t return { ...state, isLoading: false, payload: action.payload, error: void 0 }; 
 

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

 
\t \t default: return state; 
 
\t } 
 
}

的相關動作是這樣的：

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) { 
 
\t return function (dispatch) { 
 
\t \t dispatch(requestVehicleLookup()); 
 

 
\t \t axios.create({ 
 
\t \t \t timeout: 4000, 
 
\t \t }) 
 
\t \t \t .post('/*api url*', { 
 
\t \t \t \t action: '*method*', 
 
\t \t \t \t body: { vrm }, 
 
\t \t \t }) 
 
\t \t \t .then(response => response.data) 
 
\t \t \t .then(json => dispatch(receiveVehicleData(json))) 
 
\t \t \t .catch(error => dispatch(receiveVehicleDataFailure(error))); 
 
\t }; 
 
} 
 

 
function requestVehicleLookup() { 
 
\t return { type: VEHICLE_LOOKUP }; 
 
} 
 

 
function receiveVehicleData(payload: object) { 
 
\t return { type: VEHICLE_LOOKUP_SUCCESS, payload }; 
 
} 
 

 
function receiveVehicleDataFailure(error: object) { 
 
\t 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", 

Answer 1

在與@ Glitch100聊了很長時間之後（謝謝！），我設法解決了這個問題。我需要在創建axios諾言後立即返回requestVehicleLookup的調度。像這樣：

export function fetchVehicleLookup(vrm: string, jwt: string) { 
 
\t return function (dispatch) { 
 
\t \t axios.create({ 
 
\t \t \t timeout: 4000, 
 
\t \t }) 
 
\t \t \t .post('/*api url*', { 
 
\t \t \t \t action: '*method*', 
 
\t \t \t \t body: { vrm }, 
 
\t \t \t }) 
 
\t \t \t .then(response => response.data) 
 
\t \t \t .then(json => dispatch(receiveVehicleData(json))) 
 
\t \t \t .catch(error => dispatch(receiveVehicleDataFailure(error))); 
 
     
 
     
 
\t \t return dispatch(requestVehicleLookup()); 
 
\t }; 
 
}

Answer 2

首先想到的是，你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實際上並沒有工作。