Xử lý các cuộc gọi api trong Redux với Axios

Question

Chào mọi người!

Tôi là người mới bắt đầu sử dụng React và Redux, vì vậy hãy chịu đựng với tôi nếu điều này nghe hoàn toàn ngu ngốc. Tôi đang cố gắng để tìm hiểu làm thế nào tôi có thể thực hiện một số cuộc gọi API trong Redux và nó không phải tất cả sẽ tốt. Khi tôi điều khiển đăng nhập yêu cầu từ người tạo hành động, giá trị lời hứa luôn "không xác định" vì vậy tôi không chắc chắn liệu tôi có đang thực hiện điều này một cách chính xác hay không.

Mục tiêu của tôi là lấy thông tin từ dữ liệu bên trong đối tượng tải trọng và hiển thị chúng bên trong thành phần. Tôi đã cố gắng để có được điều này để làm việc cho những ngày qua và tôi hoàn toàn bị mất.

Tôi đang sử dụng Axios và lời hứa để xử lý cuộc gọi.

Mọi trợ giúp sẽ được đánh giá cao.

Đây là đầu ra từ bảng điều khiển.

Action Đấng Tạo Hóa

import axios from 'axios'; 
export const FETCH_FLIGHT = 'FETCH_FLIGHT'; 

export function getAllFlights() { 

const request = axios.get('http://localhost:3000/flug'); 
console.log(request); 
    return { 
    type: FETCH_FLIGHT, 
    payload: request 
    }; 
} 

Giảm

import { FETCH_FLIGHT } from '../actions/index'; 

export default function(state = [], action) { 
    switch (action.type) { 
    case FETCH_FLIGHT: 
    console.log(action) 
     return [ action.payload.data, ...state ] 
    } 
    return state; 
    } 

Component

import React from 'react'; 
import { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { getAllFlights } from '../actions/index'; 
import Destinations from './Destinations'; 

class App extends Component { 

componentWillMount(){ 
    this.props.selectFlight(); 
} 

constructor(props) { 
super(props); 
    this.state = { 
}; 
} 

render() { 
    return (
    <div> 
    </div> 
    ); 
} 

function mapStateToProps(state) { 
return { 
    dest: state.icelandair 
    }; 
} 

function mapDispatchToProps(dispatch) { 
return bindActionCreators({ selectFlight: getAllFlights }, dispatch); 
} 
export default connect(mapStateToProps, mapDispatchToProps)(App); 

Answer 1

axios là lời hứa vì vậy bạn cần phải sử dụng then để có được kết quả của bạn. Bạn nên yêu cầu api của bạn trong một tập tin riêng biệt và gọi hành động của bạn khi kết quả trở lại.

//WebAPIUtil.js 
axios.get('http://localhost:3000/flug') 
    .then(function(result){ 
    YourAction.getAllFlights(result) 
    }); 

Trong tập tin hành động của bạn sẽ như thế này:

export function getAllFlights(request) { 
    console.log(request); 
    return { 
    type: FETCH_FLIGHT, 
    payload: request 
    }; 
} 

Answer 2

Cách tốt nhất để giải quyết điều này bằng cách thêm middlewares Redux http://redux.js.org/docs/advanced/Middleware.html để xử lý tất cả các yêu cầu api.

https://github.com/svrcekmichal/redux-axios-middleware là phần mềm trung gian cắm và phát mà bạn có thể sử dụng.

Answer 3

Tôi cũng nghĩ cách tốt nhất để làm điều này là bằng redux-axios-middleware. Quá trình cài đặt có thể là một chút khôn lanh như cửa hàng của bạn nên được cấu hình theo cách tương tự:

import { createStore, applyMiddleware } from 'redux'; 
import axiosMiddleware from 'redux-axios-middleware'; 
import axios from 'axios'; 
import rootReducer from '../reducers'; 

const configureStore =() => { 
    return createStore(
    rootReducer, 
    applyMiddleware(axiosMiddleware(axios)) 
); 
} 

const store = configureStore(); 

Và người sáng tạo hành động của bạn bây giờ trông như thế này:

import './axios' // that's your axios.js file, not the library 

export const FETCH_FLIGHT = 'FETCH_FLIGHT'; 

export const getAllFlights =() => { 
    return { 
    type: FETCH_FLIGHT, 
    payload: { 
     request: { 
     method: 'post', // or get 
     url:'http://localhost:3000/flug' 
     } 
    } 
    } 
} 

Answer 4

Bạn có thể làm điều này với thunk. https://github.com/gaearon/redux-thunk

Bạn có thể gửi một hành động trong then của mình và nó sẽ cập nhật trạng thái khi nhận được phản hồi từ cuộc gọi qua trục.

export function someFunction() { 
 
    return(dispatch) => { 
 
     axios.get(URL) 
 
     .then((response) => {dispatch(YourAction(response));}) 
 
     .catch((response) => {return Promise.reject(response);}); 
 
    }; 
 
}