Как получить разрешенное обещание моему компоненту с обещанием Redux?

Question

Я делаю запрос в своем действии - вытягивая из API, который должен загружать некоторые данные в мой компонент. Я его запустить этот запрос, когда компонент будет расти, но я не могу показаться, чтобы получить Redux-Promise, чтобы работать правильно, потому что он просто держит возвращение:

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 

в моих Девых инструментах, когда я пытаюсь console.log значение внутри моего метода componentWillMount.

Вот мой код ниже:

магазин & маршрутизатор

import React from 'react'; 
import { render } from 'react-dom'; 
import { createStore, applyMiddleware } from 'redux'; 
import promiseMiddleware from 'redux-promise'; 
import { Provider } from 'react-redux'; 
import { Router, hashHistory } from 'react-router'; 
import routes from './routes'; 
import rootReducer from './reducers'; 

const store = createStore(
    rootReducer, 
    applyMiddleware(promiseMiddleware) 
); 

render(
    <Provider store={store}> 
    <Router history={hashHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('root') 
); 

Действие

import axios from 'axios'; 

export const FETCH_REVIEWS = 'FETCH_REVIEWS'; 
export const REQUEST_URL = 'http://www.example.com/api'; 

export function fetchReviews() { 
    const request = axios.get(REQUEST_URL); 
    return { 
    type: FETCH_REVIEWS, 
    payload: request 
    }; 
}; 

Отзывы Редуктор

import { FETCH_REVIEWS } from '../actions/reviewActions'; 

const INITIAL_STATE = { 
    all: [] 
}; 

export default function reviewsReducer(state = INITIAL_STATE, action) { 
    switch(action.type) { 
    case FETCH_REVIEWS: 
     return { 
     ...state, 
     all: action.payload.data 
     } 
    default: 
     return state; 
    } 
} 

Корень Редуктор

import { combineReducers } from 'redux'; 
import reviewsReducer from './reviewsReducer'; 

const rootReducer = combineReducers({ 
    reviews: reviewsReducer 
}); 

export default rootReducer; 

Компонент

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchReviews } from '../../actions/reviewActions'; 

class Home extends Component { 
    componentWillMount() { 
    console.log(this.props.fetchReviews()); 
    } 

    render() { 
    return (
     <div>List of Reviews will appear below:</div> 
    ); 
    } 
} 

export default connect(null, { fetchReviews })(Home); 

Любое и вся помощь очень ценится. Спасибо.

Answer 1

Redux-prom возвращает нужный объект Promise, поэтому вы можете немного изменить свой код, чтобы избежать немедленного выполнения.

class Home extends Component { 
    componentWillMount() { 
    this.props.fetchReviews().then((whatever) => { console.log('resolved')}) 
    } 
    // ... 
}