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

: fetchItem를 호출 할 때

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

당신은 dispatch를 사용하는 것을 잊었다 :

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

또는 경우

dispatch을 직접 사용하고 싶지는 않습니다.

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에 직접 mapDispatchToProps을 사용할 수 있습니다

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