2017-10-01 6 views
0

Thunk 액션이 핵심 로직을 통해 실행되고 있지 않습니다. 나는 덤크 동작을 componentDidMount에서부터 시작했으나 다음으로 실행하지 않습니다 : const response = await findOne(id).Thunk Action Body가 호출되지 않습니다.

또한, 나는 명시 적으로 mapDispatchToProps에 소품으로 dispatch를 전달할 필요가 없다고 생각했습니다. redux-thunk를 사용하는 경우, 제 썽크 설정이 발송물을 이미 사용할 수 있다고 생각합니까? 그리고 나는 이와 같은 다른 행동을 사용했습니다.

썽크 작업

export function fetchCompany(id) { 
    return async (dispatch) => { 

    try { 
     const response = await findOne(id) 

     if(response && response.body) { 
     const company = response.body 
     dispatch(companyReceived(company)) 
     } 
    } catch(err) { 
     console.log("failed request in authenticate thunk action") 
     console.log(`error details: ${err.status} /n ${err}`) 
    } 
    } 
} 

컨테이너 ...... 과거

import { fetchCompany } from '../../client/actions/company/CompanyAsyncActions' 

class InterviewContainer extends Component { 
    async componentDidMount() { 
    await fetchCompany(this.props.params.companyId) 
    } 

    render(){ 
    return (this.props.company && <Interview className='ft-interview' company={this.props.company} />) 
    } 
} 

const mapStateToProps = state => ({ 
    company: state.company.company 
}) 

const mapDispatchToProps = { 
    fetchCompany: fetchCompany 
} 

export default connect(mapStateToProps, mapDispatchToProps)(InterviewContainer) 

, 나는 mapDispatchToProps에 소품으로 (파견)를 통과하지 않은 괜찮 았어. 하지만 다른 사람들이 그렇게하고있는 것을 봅니다. 내가하지 않으면 내 코드는 과거에 어떻게 작동 했습니까? 위의 예에서 이번에는 왜 이번에는 작동하지 않습니까?

다른 비동기 액션 썽크 컨테이너에서 살펴보면 예를를 호출이 완전히 잘 작동, 나는 다른 컨테이너

용기

class HomePageContainer extends Component { 
    constructor(){ 
    super() 
    } 

    async componentDidMount() { 
    await this.props.fetchFeaturedCompanies() 
    await this.props.fetchCompanies() 
    await this.props.fetchCountries() 
    } 

    render(){ 
    return (<HomePage className='ft-homepage' 
         featuredCompanies={this.props.featuredCompanies} 
         countries={this.props.countries} 
         companies={this.props.companies} 
    />) 
    } 
} 

const mapStateToProps = state => ({ 
    countries: state.country.countries, 
    companies: state.company.companies, 
    featuredCompanies: state.company.featuredCompanies 
}) 

const mapDispatchToProps = { 
    fetchCountries: fetchCountries, 
    fetchCompanies: fetchCompanies, 
    fetchFeaturedCompanies: fetchFeaturedCompanies 
} 

export default connect(mapStateToProps, mapDispatchToProps)(HomePageContainer) 
에서 같은 방법으로 전화 드렸습니다

썽크 액션

export function fetchCompanies() { 
    return async (dispatch, getState) => { 
    const response = await find() 

    if(response && response.body) { 
     const companies = response.body 
     dispatch(companiesReceived(companies)) 
    } 
    } 
} 
+0

함수 개체를'connect'의'mapDispatchToProps' 매개 변수로 전달하면 각 함수는'dispatch'에 래핑되어'mapDispatchToProps'는 문제가되지 않습니다. 자세한 정보는 [docs on connect] (https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)를 참조하십시오. – topher

답변

1

componentDidMountInterviewContainer인데 실수로 this.props.fetchCompany 대신에 가져온 fetchCompany을 불러오고 있습니다.

+0

예, 나는 바보예요, 저도 그렇게 생각합니다. 응. 감사 – PositiveGuy