Redux動作ajax結果未派發給reducer

我剛剛試用Redux，並且我知道中間件對於進行ajax調用是必不可少的。我已經分別安裝了redux-thunk和axios軟件包，並試圖將我的結果作爲狀態掛鉤，並將ajax結果呈現給我的組件。但是，我的瀏覽器控制檯顯示錯誤，我的縮減器無法獲取有效負載。Redux動作ajax結果未派發給reducer

錯誤：

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

這是我的代碼部分，中間件是如何連接起來：

//after imports 

const logger = createLogger({ 
    level: 'info', 
    collapsed: true, 
}); 

const router = routerMiddleware(hashHistory); 

const enhancer = compose(
    applyMiddleware(thunk, router, logger), 
    DevTools.instrument(), 
    persistState(
    window.location.href.match(
     /[?&]debug_session=([^&]+)\b/ 
    ) 
) 

// store config here...

我的行動：

import axios from 'axios'; 

export const SAVE_SETTINGS = 'SAVE_SETTINGS'; 

const url = 'https://hidden.map.geturl/?with=params'; 
const request = axios.get(url); 

export function saveSettings(form = {inputFrom: null, inputTo: null}) { 
    return (dispatch) => { 
    dispatch(request 
     .then((response) => { 
     const alternatives = response.data.alternatives; 
     var routes = []; 
     for (const alt of alternatives) { 
      const routeName = alt.response.routeName; 
      const r = alt.response.results; 
      var totalTime = 0; 
      var totalDistance = 0; 
      var hasToll = false; 
      // I have some logic to loop through r and reduce to 3 variables 
      routes.push({ 
      totalTime: totalTime/60, 
      totalDistance: totalDistance/1000, 
      hasToll: hasToll 
      }); 
     } 
     dispatch({ 
      type: SAVE_SETTINGS, 
      payload: { form: form, routes: routes } 
     }); 
     }) 
    ); 
    } 
}

減速機：

import { SAVE_SETTINGS } from '../actions/configure'; 

const initialState = { form: {configured: false, inputFrom: null, inputTo: null}, routes: [] }; 

export default function configure(state = initialState, action) { 
    switch (action.type) { 
    case SAVE_SETTINGS: 
     return state; 
    default: 
     return state; 
    } 
}

可以看到狀態routes具有0大小，但該行動的有效載荷有3

陣列非常感謝所有幫助，謝謝。

來源

2016-06-17 nayiaw

它看起來像你在你的動作中有不必要的調度，並且你的request看起來沒有在正確的位置實例化。我相信你的行爲應該是：

export function saveSettings(form = { inputFrom: null, inputTo: null }) { 
    return (dispatch) => { 
    axios.get(url).then((response) => { 
     ... 
     dispatch({ 
     type: SAVE_SETTINGS, 
     payload: { form: form, routes: routes } 
     }); 
    }); 
    }; 
}

來源

2016-06-17 16:48:05

Redux動作ajax結果未派發給reducer

回答

相關問題