Не удается разрешить обещание Axios в функции редуктора

Question

Я пытаюсь получить список каналов из slack api, сохранить их в хранилище резервов и отреагировать.

axios получает [[PromiseValue]], но я не могу получить объекты в нем:

файл редуктора:

import * as actionTypes from "../actions/types";
import { getChannels } from "./../services/channelService";

const channelsReducer = (state = getChannels(), action) => {
    switch (action.type) {
        case actionTypes.GET_CHANNELS:
            return state;

        default:
            return state;
    }
};

файл channelService.js:

import axios from "axios";

export const getChannels = async () => {
    const token =
        "token";
    return await axios
        .get(`https://slack.com/api/conversations.list?token=${token}`)
        .then(response => {
            return response.data;
        });
};

файл action.js:

import * as actionTypes from "./types";

export const getChannels = () => async dispatch => {
    dispatch({
        type: actionTypes.GET_CHANNELS
    });
};

и файл моего компонента:

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

class Navbar extends Component {
    state = {};
    componentDidMount() {}
    render() {
        console.log(this.props.channels);
    }
}

const mapStateToProps = state => {
    return {
        channels: state.channels
    };
};

const mapDispatchToProps = dispatch => {
    return bindActionCreators(actions, dispatch);
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Navbar);

Как я могу получить доступ к объектам внутри этого обещания из axios?

Answer 1

Вы не можете вызвать getChannels() в своем редукторе, потому что это асинхронная функция, а ваш редуктор синхронный. Тем не менее, вы можете отправить свое действие после того, как ваш ответ API возвращается

export const getChannels = (dispatch) => {
    const token = "token";
    axios
        .get(`https://slack.com/api/conversations.list?token=${token}`)
        .then(response => {
            dispatch(//your action here... )
        });
};

Вызовите это изнутри вашего компонента и передайте отправку.

В качестве альтернативы вы можете изменить существующее действие, предложенное Эмилем:

  export const getChannels = () => dispatch => {
     const token = "token";
     axios
        .get(`https://slack.com/api/conversations.list?token=${token}`)
        .then(response => {
            dispatch({
                 type: actionTypes.GET_CHANNELS, 
                 payload: response.data
               })
        });
    };    
 };