보기 로직을 ​​redux로 처리하기

Question

내 mapStateToProps의 복잡성이 증가하고있는 것을 알게되었습니다. 이 같은 예를 들어

, 연결된 여러 구성 요소에, 내가 해왔 던 일 :

const mapStateToProps = (state) => { 
    return { 
    activeAsset: state.assets.byId[state.assets.activeAssetId].attributes 
    } 
} 

문제 # 1 : 위의 코드는 activeAssetId 이후 일부 조건부로 보호 될 수 있음을 매우 분명하다 위의 원인으로 인해 오류가 발생합니다.

문제 # 2 : 가정하자 나는 이제 위의 코드를 복제 할 필요가 여러 구성 요소의 현재 activeAsset을 얻고 싶었다.

나는 reselect에 대해 들어 보았습니다. 그러나 memoized 함수와 함께 사용 된 것으로 보아 이것이 올바른 선택인지 확실하지 않습니다.

답이 매우 분명하다면 용서 해주십시오. 저는 redux 생태계에 상당히 익숙합니다.

Answer 1

안전한 해결책은 선택기를 사용하는 것입니다. 선택기는 상점의 상태 모양을 알고 재사용 가능한 데이터를 생성 할 수있는 재사용 가능한 기능입니다. 귀하의 경우에는

이 당신의 선택이 될 수 있습니다

const getAssetAttributes = ({ assets }) => (assets.byId[state.assets.activeAssetId] && assets.byId[state.assets.activeAssetId].attributes) || null; // if the asset exists and has attributes return it, if not return null 

사용법 :

const mapStateToProps = (state) => { 
    return { 
    activeAsset: getAssetAttributes(state) 
    } 
} 

당신은 모든 파생 된 데이터에 대한 선택기를 작성하고 관련 감속기의 파일에 저장, 또는 수 별도의 selectors 파일. Reselect는 메모 작성 표준 선택기를 만드는 데 도움을 줄 수 있지만 필수는 아닙니다. 선택기를 다시 선택하면 매개 변수가 변경되지 않은 경우 동일한 데이터가 반환되므로 불필요하게 구성 요소를 다시 렌더링 할 수 없습니다.