다음 상황을 처리하는 가장 효과적인 방법은 무엇입니까? 더 효율적인 방법을 설명하는 다른 방법이 있습니까? 그것을 관리하는 '표준'방식이 있습니까? 나는 게시물의 목록을 반환 할Redux에서 관계형/중첩 된 데이터를 어떻게 가져 옵니 까?
[{
id: 1,
name: 'ExampleUser',
...other user data
},
...more users
]
:
/posts
/users
GET/게시물 :
[{
id: 1,
title: 'Some post',
userId: 1,
...other post data
},
...more posts
]
GET/사용자/1
내가 다음과 끝점을 말해봐 이를 작성한 사용자에 대한 몇 가지 기본 정보를 보여줍니다. 이것을하기 위해서. 게시물 목록을 가져와야하고 각 게시물마다 사용자를 가져올 것입니다. 한 사용자가 여러 게시물에서 참조 될 수 있습니다.<PostsList posts={posts}>
<Post post={post}>
<UserInfo user={user} />
</Post
</PostsList>
옵션 A : 파견 (fetchPosts()) PostsList에서, 다음 발송 각 포스트 (fetchUser (post.userId) (또는
반작용 구성 요소
는 (의사)로 구성되어 있습니다 각 사용자 정보)장점 : 구현하기가 아주 쉬운, 전문 조치를 필요로하지 않는다 (즉, fetchPostsWithUserInfo())
단점 : 여러 구성 요소가 저장소에 연결해야하는 경우 구성 요소를 렌더링하는 방법을 알고 또는 로딩 스피너가 복잡한 논리에 들어갈 수 있습니다. 동일한 사용자를 여러 번 가져올 수 있습니다 (fetchUser (post.userId)가 작업 시작시 가져 오는 사용자를 기록하는 작업을 발송하더라도이 작업은 중복 호출을 완전히 방지하지 못하는 것 같습니다).
이옵션 B : 행동에 핸들
const fetchPostsWithUsers =() => dispatch => {
dispatch(fetchPostsWithUsersStart());
fetchPostsFromServer()
.then(res => {
dispatch(fetchPostsSuccess());
const users = getListOfUniqueUserIds(res.data);
users.forEach(userId => dispatch(fetchUser(userId)));
})
.catch(err => dispatch(fetchPostsError()));
}
장점 : 중복 통화, 적은 수의 연결 구성 요소
단점 :로드 중 검사의 많은 문제가; 일부 호출이 실패하면 정보가 누락 될 수 있습니다. 단단히 커플의 게시물은 사용자 데이터가
옵션 C
가져 오는에 전화 :처럼 옵션 B를하지만, 사용자 데이터를 가져 오기 위해 Promise.all를 사용하고) 파견 (fetchPostsWithUserDataSuccess() (단 하나의 성공 호출이 장점 : 전부 또는 일부 데이터가 부분적으로 누락되지 않았으므로
단점 : 한 번 가져 오기가 실패하면 모든 데이터를 다시 가져와야하고 모든 개인을 기다릴 필요가 있으므로 응답 시간이 느려집니다. 모든 데이터를 사용할 수있게되기 전에 완료하기위한 호출
나는이 주제에 대한 정보를 찾기 위해 오랫동안 시도해 왔지만, 나는 그것이 일반적인 경우라고 생각하기 때문에 어떤 정보도 찾을 수 없었다. 문제를 설명하는 데 올바른 용어를 모르는 것일 수도 있습니다.이 경우 올바른 용어를 아는 것이 중요합니다.