Come utilizzare axios/AJAX con redux-thunk

Question

Im utilizzando assios all'interno della mia azione. Ho bisogno di sapere se questo è il modo giusto per farlo 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; 
} 

e poi tornare la loro combinazione all'interno rootReducer.js ==>

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

export default combineReducers({ 
    reducerWeather 
}); 

E infine chiama nel mio contenitore React som e js file di ...

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

Credo che non si dovrebbe (o almeno non dovrebbe) mettere la promessa direttamente presso il negozio:

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

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

In questo modo non si sta anche utilizzando redux -thunk, perché restituisce un oggetto semplice. In realtà, redux-thunk, consente di restituire una funzione che verrà valutata in seguito, ad esempio, qualcosa di simile:

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 
     }).error((response) => dispatch({ 
     type: types.FETCH_WEATHER_FAILURE, 
     error: response.error 
     }) 
    } 
} 

Assicurarsi di impostare correttamente il middleware Redux-thunk. I raccomandiamo davvero a redux-thunk documentation e this amazing article per avere una comprensione più profonda.