Результат ajax для Redux не отправлен на редуктор

Question

Я просто экспериментирую с Redux, и я знаю, что промежуточное программное обеспечение имеет важное значение для совершения вызовов ajax. Я установил пакет redux-thunk и axios отдельно и попытался привязать мой результат как состояние и сделать результат ajax для моего компонента. Однако моя консоль браузера отображает ошибку, и мой редуктор не может захватить полезную нагрузку.

Ошибка:

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.

Действительно ценим любую помощь, спасибо.

Answer 1

Похоже, что у вас есть ненужная отправка в вашем действии, и ваш 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 } 
     }); 
    }); 
    }; 
}