Получите данные ответа от Axios, используя избыточный поток - PullRequest
Новая
       20

Получите данные ответа от Axios, используя избыточный поток

0 голосов
/ 03 июля 2018

Я пытаюсь вернуть некоторые данные из ответного вызова API, используя Axios и redux. Тем не менее, я застрял в том, как я должен получить данные. Ведение журнала работает просто отлично, но я не могу получить доступ к данным из обещания. Любая помощь будет оценена.

Videoplayer.js 

    import React, { Component } from 'react';
    import { connect } from "react-redux";
    import * as actions from "../actions";

    class Videoplayer extends Component {
        renderContent() {
            return this.props.fetchSong("house"); // this SHOULD return a URL
        }

        render() {
            return (
                <video className="responsive-video" controls autoPlay>
                    <source src={this.renderContent()} type="video/mp4"></source>
                </video>
            )
        }
    }
    export default connect(null, actions)(Videoplayer);

index.js (папка действий) 

import axios from "axios";
import { FETCH_SONG } from "./types";

export const fetchSong = category => async dispatch => {
    const res = await axios.get(`/api/${category}`);
    dispatch({ type: FETCH_SONG, payload: res.data });
};

genreReducer.js 

import { FETCH_SONG } from "../actions/types";

export default function(state = null, action) {
    switch (action.type) {
        case FETCH_SONG:
            console.log(action.payload);
            return action.payload;

        default: 
            return state;
    }
}

1 Ответ

0 голосов
/ 03 июля 2018

Вы используете Redux. Создатель вашего действия не возвращает URL-адрес напрямую, он отправляет действие и обновляет ваше состояние. Используйте создателя ваших действий в componentDidMount. Итак, это обновляет ваше состояние. Затем с mapStateToProps используйте это состояние для доступа к вашим данным, URL здесь. Примерно так: 

import React, { Component } from 'react';
import { connect } from "react-redux";
import * as actions from "../actions";

class Videoplayer extends Component {
    componentDidMount() {
        this.props.fetchSong("house");
    }

    render() {
        return (
            <video className="responsive-video" controls autoPlay>
                <source src={this.props.songURL} type="video/mp4"></source>
            </video>
        )
    }
}

const mapStateToProps = state => ({
    songURL: state.yourStateName,
});

export default connect(mapStateToProps, actions)(Videoplayer);

Замените yourStateName названием вашего штата для вашего редуктора.

...