還元剤は空のオブジェクトを返すのですか？ここ

Question

は私のコードです：

アクションの作成者

export function fetchHead() { 

    const url = HEAD_URL; 

    const request = axios.get(url); 

    return { 

    type: FETCH_HEAD, 

    payload: request 

    }; 
} 

リデューサー

import { FETCH_HEAD } from '../actions'; 

import _ from 'lodash'; 

export default function(state = {}, action) { 

    switch (action.type) { 

    case FETCH_HEAD: 

     return _.mapKeys(action.payload.data.articles, 'id'); 

    default: 

     return state; 
    } 

} 

減速キー、

import { combineReducers } from 'redux'; 


import HeadReducer from './head_reducer'; 

const rootReducer = combineReducers({ 


    heads: HeadReducer 

}); 

export default rootReducer; 

を約束しますの

コンポーネント

import React, { Component } from 'react'; 

import { connect } from 'react-redux'; 

import { fetchHead } from '../actions'; 

class HeadNews extends Component { 

    componentDidMount() { 

    this.props.fetchHead(); 

    console.log(this.props.heads); 
    } 

    render() { 

    return <div>Hello</div>; 

    } 

} 

function mapStateToProps(state) { 

    return { heads: state.heads }; 

} 

export default connect(mapStateToProps, { fetchHead })(HeadNews); 

Answer 1

あなたが減速にdefferedオブジェクトを渡しているとされていないデータは、Ajaxリクエストから返されました。私はあなたがredux-thunkmiddlewareを使用しているかどうかを知りませんが、代わりにアクションのようなプレーンなオブジェクトの機能を返すアクションをディスパッチするためにする必要があります

axios.get(url) 
     .then(function (response) { 
     return { 
      type: FETCH_HEAD, 
      payload: response 
     } 
     }) 
     .catch(function (error) { 
     console.log(error); 
     }); 

EDIT
：
あなたは.thenを使用する必要がありますredux-thunkを使用する必要があります。

Answer 2

だけが、funcnctionレンダリング下にconsole.log：

componentDidMount（）{

this.props.fetchHead(); 

}

（レンダリング）{

はconsole.log（this.props.heads ）;

return <div>Hello</div>; 

}