어떻게 반응 redux를 사용하여 배열의 각 요소를 개별적으로 연결

Question

현재 접근 방식은 전체 도서 목록을 도서 목록 구성 요소에 연결하는 것입니다. 그러나 상태의 여러 필드 만 변경하여 거대한 구성 요소를 렌더링하는 것은 효율적이지 않습니다. 각 도서 구성 요소를 매핑하는 방법을 모르면 각각의 도서 상태에 연결하십시오.

프로젝트에서 redux를 사용 중입니다. 도서 목록 구성 요소에서이

{ 
    "books": [ 
    { 
     "field1": "field1", 
     "field2": "field2", 
     "field3": "field3", 
    } ... 
    ] 
} 

같은 응용 프로그램 전역 상태, 우리는 REDUX

export default connect(state => ({ 
    books: state.books 
}))(BookListComponent); 

는 이제 요구 사항 변경이 책의 필드가 자주 변경되지 않습니다 반응 사용하여 그것으로 목록을 연결합니다. 문제는 한 필드가 변경되면 전체 BookListComponent를 업데이트한다는 것입니다. 그것은 내가 기대하고있는 실행 요소가 아닙니다.

내가 reselect

를 사용하기 위해 국가는 나는 그것이 작동하도록 연결 작성하는 방법을 잘 모릅니다, 책의 인덱스가 나던 개별 예약 구성 요소까지 연결 논리를 밀어 싶습니다

export default connect(state => ({ 
    books[index]: state.books[index] 
}))(BookListComponent); 

미리 감사드립니다. 모든 옵션을 환영합니다.

Answer 1

원하는 구성 요소를 연결할 수 있습니다. 최상위 구성 요소 만 연결할 수 있다는 단호하고 빠른 규칙은 없습니다.

최상위 구성 요소를 연결하고 소품을 전달할 때 성능이 떨어지는 동안 눈에 띄는 해로운 영향을 미치지는 않았습니다. 내 의견으로는 코드를 통해 데이터를 추적 할 수 있다는 이점이 항상 가치가 있습니다. 토론은 here입니다.

Answer 2

는 필드

기능은 전체 목록이 다시 렌더링되는 것을 의미하지 않는다 책을 업데이트 할 때마다 호출되어 렌더링하는 것이 사실이지만

변경 업데이트를 반응한다.

React에서는 가상 DOM을 사용하고 있습니다. 실제로 변경된 요소 만 업데이트 할 수 있습니다.

것은이 문서에서보세요 당신이 그 기사를 읽었다면 https://facebook.github.io/react/docs/state-and-lifecycle.html

, 당신은 모든 당신을 알고 (이 짧다 및 코드 codeopen의 예를 가지고) https://facebook.github.io/react/docs/rendering-elements.html 이 하나 (좀 더 상세한를) 앱을 검사하고 각 변경 사항에서 실제로 렌더링되는 것을 확인해야합니다.

Answer 3

두 번째 예는 거의입니다. mapState 함수는 하나가 아닌 두 개의 매개 변수를 사용하도록 선언 할 수 있습니다. 두 개의 매개 변수가 선언되면 Redux는 해당 mapState 함수를 래퍼 구성 요소에 지정된 소품과 함께 호출합니다.그래서, 목록 항목에 대한 mapState 기능은 다음과 같습니다

는

const mapState = (state, ownProps) => { 
    const book = state.books[ownProps.index]; 
    return {book} 
} 

내 블로그 게시물 Practical Redux, Part 6: Connected Lists, Forms, and Performance는 작업을 수행하는 방법에 대한 몇 가지 예를 보여줍니다, 또한 돌아 오는에서 애플리케이션 성능에 대한 주요 고려 사항에 대해 설명합니다.