Cách sử dụng axios/AJAX với redux-thunk

Question

Im sử dụng trục bên trong hành động của tôi. Tôi cần phải biết nếu đây là cách đúng đắn để làm điều đó hay không.

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

và sau đó quay kết hợp chúng trong rootReducer.js ==>

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

export default combineReducers({ 
    reducerWeather 
}); 

Và cuối cùng gọi nó bên trong thùng chứa React của tôi e js tập tin ...

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

Tôi đoán bạn không nên (hoặc ít nhất là không phải) đặt lời hứa trực tiếp tại cửa hàng:

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

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

Bằng cách này bạn thậm chí không sử dụng Redux -thunk, bởi vì nó trả về một đối tượng đơn giản. Trên thực tế, redux-thunk, cho phép bạn trả về một hàm sẽ được đánh giá sau này, ví dụ như một cái gì đó như thế này:

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

Hãy chắc chắn thiết lập đúng phần mềm trung gian redux. Tôi thực sự khuyên bạn nên đọc redux-thunk documentation và this amazing article để hiểu rõ hơn.