Reselect - 셀렉터에서 정의되지 않은 프롭

Question

셀렉터가있는 컨테이너가 하나 있고 다른 셀렉터가있는 다른 컨테이너가 렌더링됩니다.

문제는 두 번째 것, 소품이 정의되지 않았고 모든 것이 깨졌습니다.

selectProductsState 정의 복귀 소품 :

여기 (소품이 2 선택기에 정의되어 있지) 코드이다.

하나 선택 :

const selectProductsState =() => ({ products }, props) => { return { products, props } }; 

const getCurrentProductFromParams =() => createSelector(
    selectProductsState(), 
    getProductsItems(), 
    ({ props }, items) => { 
    const id = extractId(props.params); 

    return items[id]; 
    } 
); 

ProductContainer :

class ProductPage extends React.Component { 

    render() { 
     return (<OtherContainer />) 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    hasLoadingErrors: getHasLoadingErrors(), 
    productNotFound: getProductNotFound(), 
    product: getProduct(), 
    getCurrentProductFromParams 
}); 

또 다른 컨테이너가 자신의 선택기가 있습니다.

어떻게 해결할 수 있습니까?

감사

Answer 1

문제는 ProductPage 컨테이너에 react-router에서 전달 된 params 소품과 함께했다. 그래서 params는 OtherContainer까지 전달되지 것

가 자동으로 따라서,이 솔루션은 OtherContainer에 수동으로 소품 통과 undefined

있어 PARAMS :

class ProductPage extends React.Component { 
    render() { 
     return (<OtherContainer params={this.props.params} />) 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    hasLoadingErrors: getHasLoadingErrors(), 
    productNotFound: getProductNotFound(), 
    product: getProduct(), 
    getCurrentProductFromParams 
}); 

Answer 2

당신이 당신의 결과 기능 PARAMS ( { props })에 undefined 개체에서 props 속성을 추출하려고하기 때문에 아마 나누기

.

selectProductsState에서 undefined를 수신하는 것이 허용되는 경우에는 엣지 케이스를 고려하기 위해 결과 함수를 간단히 다시 작성해야합니다. 예를 들면 :

(productsState, items) => { 
    if(productsState === undefined){ 
     return undefined; 
    } 
    const id = extractId(productsState.props.params); 
    return items[id]; 
}