javascript - thunks - Cómo usar axios/AJAX con redux-thunk

reduxthunk withextraargument

Question

Estoy usando axios dentro de mi acción. Necesito saber si esta es la forma correcta de hacerlo o no.

actions/index.js ==>

import axios from ''axios'';
import types from ''./actionTypes''
const APY_KEY = ''2925805fa0bcb3f3df21bb0451f0358f'';
const API_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${APY_KEY}`;

export function FetchWeather(city) {
  let url = `${API_URL}&q=${city},in`;
  let promise = axios.get(url);

  return {
    type: types.FETCH_WEATHER,
    payload: promise
  };
}

reducer_weather.js ==>

import actionTypes from ''../actions/actionTypes''
export default function ReducerWeather (state = null, action = null) {
  console.log(''ReducerWeather '', action, new Date(Date.now()));

  switch (action.type) {
    case actionTypes.FETCH_WEATHER:
          return action.payload;
  }

  return state;
}

y luego venga combinándolos dentro de rootReducer.js ==>

import { combineReducers } from ''redux'';
import reducerWeather from ''./reducers/reducer_weather'';

export default combineReducers({
  reducerWeather
});

Y finalmente llamándolo dentro de mi contenedor React algún archivo js ...

import React, {Component} from ''react'';
import {connect} from ''react-redux'';
import {bindActionCreators} from ''redux'';
import {FetchWeather} from ''../redux/actions'';

class SearchBar extends Component {
  ...
  return (
    <div>
      ...
    </div>
  );
}
function mapDispatchToProps(dispatch) {
  //Whenever FetchWeather is called the result will be passed
  //to all reducers
  return bindActionCreators({fetchWeather: FetchWeather}, dispatch);
}

export default connect(null, mapDispatchToProps)(SearchBar);

Answer 1

Supongo que no deberías (o al menos no deberías) poner la promesa directamente en la tienda:

export function FetchWeather(city) {
  let url = `${API_URL}&q=${city},in`;
  let promise = axios.get(url);

  return {
    type: types.FETCH_WEATHER,
    payload: promise
  };
}

De esta manera, ni siquiera estás usando redux-thunk, porque está devolviendo un objeto plano. En realidad, redux-thunk, le permite devolver una función que se evaluará más adelante, por ejemplo, algo como esto:

export function FetchWeather(city) {
  let url = `${API_URL}&q=${city},in`;
  return function (dispatch) { 
    axios.get(url)
      .then((response) => dispatch({
        type: types.FETCH_WEATHER_SUCCESS,
        data: response.data
      })).catch((response) => dispatch({
        type: types.FETCH_WEATHER_FAILURE,
        error: response.error
      }))
  }
}

Asegúrese de configurar correctamente el middleware redux-thunk. Realmente recomiendo leer la documentación de redux-thunk y este increíble artículo para tener una comprensión más profunda.