Wie verwendet man Axios/AJAX mit Redux-Thunk

Question

Im mit Axios in meiner Aktion. Ich muss wissen, ob dies der richtige Weg ist oder nicht.

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; 
} 

und dann kommen sie innerhalb rootReducer.js Kombination ==>

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

export default combineReducers({ 
    reducerWeather 
}); 

Und schließlich ruft es in meinem React container som

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

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

Auf diese Weise können nicht einmal redux verwenden: e js Datei ...

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

Ich denke, man sollte das Versprechen direkt im Laden stellen nicht (oder zumindest nicht anzunehmen) -thunk, weil es ein einfaches Objekt zurückgibt. Eigentlich redux-Thunk, können Sie eine Funktion zurückzugeben, die später ausgewertet werden, zum Beispiel so etwas wie diese:

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 
     }) 
    } 
} 

Seien Sie sicher, dass die redux-Thunk Middleware korrekt eingerichtet. Ich wirklich empfehlen lesen redux-thunk documentation und this amazing article, um ein tieferes Verständnis zu haben.