Redux Promise로 내 구성 요소에 대한 약속 된 약속을 얻으려면 어떻게해야합니까?

Question

내 작업에서 일부 데이터를 내 구성 요소로로드해야하는 API를 요청하면서 요청을하고 있습니다. 나는 구성 요소가 마운트 할 때, 그 요구를 시작,하지만 난 그냥 돌아 유지하기 때문에 돌아 오는-약속이 제대로 작동하려면 얻이 수없는 것 : 내 개발 도구에서

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

감속기 리뷰

,369 : 여기

아래 내 코드입니다

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

돌아 오는-약속은, 적절한 Promise 개체를 반환합니다.

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