mapStateToProps 내의 상태 속성에 액세스하십시오.

Question

컨테이너 내에서 redux 상태의 특정 속성에 액세스해야합니다. 이러한 속성은 차례로 다른 중첩 된 속성을 가져 와서 구성 요소 소품에 매핑하는 데 사용됩니다. 나는 immutable을 사용한다.

mapStateToProps에서이 작업을 수행하는 가장 좋은 방법은 무엇입니까? MapStateToProps가 이미 전체 상태를 매개 변수로 받기 때문에 성능 오버 헤드가 발생합니까? 아니면 정상입니까?

다음은 예입니다.

상태 선택기 :

export const userSettingsState = state => state.get('userSettings'); 
export const transactionsState= state => state.get('transactions'); 

userSettings는 불변의지도이며, 거래도 사용자 ID 및 거래 목록 쌍의지도입니다.

const mapStateToProps = (state) => { 
    const curUID = userSettingsState(state).get('currentUserID'); 
    return { 
    trList: transactionsState(state).getIn([curUID, 'trList']) 
    }; 
}; 

사용자 트랜잭션에 액세스하려면 currentUID가 필요합니다. 위의 샘플은 정상적으로 작동합니다. 그러나 최선의 방법입니까?

Answer 1

위대한 질문입니다. 예, 이것은 계산 된 소품을 처리하고 파생 데이터를 생성하는 데 선호되는 방법입니다. 이것은 최선의 방법 일뿐만 아니라 매우 효과적입니다. Cory House (지역 사회에서 잘 알려진 매우 훌륭한 React 개발자)는 a few days ago과 비슷한 내용에 대해 트윗을 작성했으며 그의 방법론은 mapStateToProps()에 적용됩니다. 다른 옵션은 componentWillReceiveProps() 및 componentDidMount()에 계산 방법을 추가하는 것뿐입니다. 당신이 상상할 수있는 것처럼 이것은 지저분 해집니다.

이제 어떻게하는지에 대한 일부 예약이 있습니다.

여기에 비동기 호출을 넣지 마십시오! 또한 구성 요소를 탑재하기 전에 실행되는 mapStateToProps()이라는 구성 요소 렌더링 문제가 발생합니다. 구성 요소가 탑재되기 전에 약속을 기다리고 있다면 성능이 저하 될 것입니다. 이것은 분명합니다.

성능에 대해 필자는 사용자 입력시 해당 8,600 개의 항목에 퍼지 필터를 적용하고 드롭 다운 목록을 다시 렌더링 한 다음 필터링 된 새 항목을 표시하는 8,600 개의 항목이있는 드롭 다운 상자에서 이와 같은 파생 데이터를 직접 생성하고 있습니다. 명부. 성능에 문제가없고 구성 요소가 버터처럼 부드럽습니다.