in react Redux 상태 원자에서 부품을 분리하는 방법을 구조화하는 방법

Question

redux 앱에서 연결하여 상태에서 데이터를 가져 오는 것이 좋습니다. 문제는 내가 자기 자신을 국부 원자와 구성 요소로 묶어 준다는 것이다. 상태 트리의 구조를 변경하려는 경우 이러한 상태를 사용하는 모든 구성 요소가 중단됩니다.

어떻게 이들을 분리 할 수 ​​있습니까?

간단한 상태 예

initialState = { 
users: { ids:[1,2] , byId:{1:{name:'user 1'},2:{name:'user 2'} } 
posts: { ids:[1,2] , byId:{1:{title:'post 1'},2:{title:'post 1'} } 
access : {1:[1,2],2:[1,2]} //post_id : [user_id who can see post] 
} 

난 포스트 목록 성분에 .. 제가 2 사용자 및 2 개 포스트가 두 게시물 모두 사용자에게 표시되는

을 descriping있어 그리고 사용자가 연결할 수 있습니다

여기서 문제는 구성 요소의 렌더링 기능이 정확한 데이터를 렌더링하기 위해 상태와 함께 많은 조작을한다는 것입니다. 나는 내가 어떻게이 상태를 다루는 등의 개체를 만들 수 있습니다

render(){ 
let my_posts = Posts.ofUser(currentUser.id) 
//now Posts should be a service that has access to state and return the needed data. 
} 

처럼 무언가를 그 구성 요소 API를 노출 및 정보 기능 접촉을 연결할 수 있다면 훨씬 더 좋을 것이다.

내가 많이 reselect에 대해 읽었지만, 그것을 구현하는 방법?

Answer 1

구성 요소에서 상태 셰이프를 분리하는 가장 쉬운 방법은 선택기를 통해 주 소품 중 하나를 쿼리하는 것입니다.

약간의 상용구 코드가 추가되었지만 일단 완료되면 구성 요소와 응용 프로그램 상태를 완벽하게 테스트 할 수있는 브리지가 생깁니다.

선택기를 시작하려면 Redux 문서 Computing derivated data 페이지를 살펴보십시오.

재 선택은 메모 작성된 선택기를 만드는 데 필요한 유틸리티입니다.