Redux-thunkアクションは実行されない関数を返します。データは取得されません。

Question

コンポーネントが搭載されたときに、reduxストアにアイテムデータを取り込むコンテナコンポーネントがあります。コンポーネントは正しく、id要求された。アクションは決して実行されないdispatch関数を返します。したがって、データは検索されません。

私は間違っていますか？

私のコンテナコンポーネントがこれです：

import { connect } from "react-redux"; 
import React, { Component } from "react"; 

import fetchItem from "../actions/itemActions"; 
import ItemDetails from "../components/ItemDetails"; 

class ItemDetailsContainer extends Component { 
    state = { 
    item: null 
    }; 

    componentDidMount() { 
    return fetchItem(this.props.match.params.number); 
    } 

    render() { 
    return <ItemDetails {...this.props} />; 
    } 
} 

const mapStateToProps = (state, props) => { 
    return { 
    item: state.item, 
    user_location: state.user_location 
    }; 
}; 

export default connect(mapStateToProps)(ItemDetailsContainer); 

私のアクション・ファイルは、次のようになります

import * as actions from "../constants/constants"; 
import fetch from "isomorphic-fetch"; 

const itemDetailsRequest = id => { 
    return { 
    type: actions.FETCH_ITEM_REQUEST, 
    id, 
    receivedAt: Date.now() 
    }; 
}; 

const itemDetailsSuccess = (id, json) => { 
    return { 
    type: actions.FETCH_ITEM_SUCCESS, 
    items: json.map(child => child), 
    receivedAt: Date.now() 
    }; 
}; 

const itemDetailsFailure = (id, json) => { 
    return { 
    type: actions.FETCH_ITEM_FAILURE, 
    error: json.error, 
    receivedAt: Date.now() 
    }; 
}; 

const fetchItem = id => { 
    console.log(`returning dispatch function for item, id: ${id}`); 
    return function(dispatch) { 
    console.log("fetching Item: " + id); 
    dispatch(itemDetailsRequest(id)); 
    fetch(`item.json?id=${id}`) 
     .then(
     response => response.json(), 
     error => console.log("AN ERROR OCCURED.", error) 
    ) 
     .then(json => { 
     dispatch(itemDetailsSuccess(id, json)); 
     }); 
    }; 
}; 

export default fetchItem; 

Answer 1

あなたはfetchItemを呼び出すときdispatchを使うのを忘れていました：

componentDidMount() { 
    return this.props.dispatch(fetchItem(this.props.match.params.number)); 
} 

場合や、 dispatchを直接使用したくないcomponentDidMountに、あなたは直接mapDispatchToPropsを使用することができます。

const mapStateToProps = (state, props) => { 
    return { 
    item: state.item, 
    user_location: state.user_location 
    }; 
}; 


const mapDispatchToProps = dispatch => { 
    return({ 
    fetchItem: (number) => dispatch(fetchItem(number)), 
    }) 
} 

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

そしてcomponentDidMount中：

componentDidMount() { 
    return this.props.fetchItem(this.props.match.params.number); 
}