2017-10-30 13 views
0

以下の状況を処理する最も効果的な方法は何ですか?より効率的なこれを扱う別の方法がありますか?それを管理するための「標準的な」方法はありますか?Reduxでリレーショナル/ネストされたデータをどのようにフェッチする必要がありますか?

/posts 

/users 

GET /ポスト:

は、私は次のエンドポイントを持っていると言う

[{ 
id: 1, 
title: 'Some post', 
userId: 1, 
...other post data 
}, 
...more posts 
] 

GET /ユーザー/ 1:

[{ 
id: 1, 
name: 'ExampleUser', 
...other user data 
}, 
...more users 
] 

私は記事のリストを返したいですそれらを作成したユーザーに関する基本的な情報が表示されます。これを行うためには。投稿のリストを取得して、各投稿ごとにユーザーを取得する必要があります。 1人のユーザーが複数の投稿で参照される可能性があります。

<PostsList posts={posts}> 
<Post post={post}> 
<UserInfo user={user} /> 
</Post 
</PostsList> 

オプションA:ディスパッチ(fetchPosts())PostsListで、次にディスパッチ各ポスト(fetchUser(post.userId)(又は中

反応させコンポーネント

は(擬似コード)として編成されていますそれぞれのUserInfo)

長所:;:;コンポーネントをレンダリングする際に知っている複数のコンポーネントがストアに接続する必要があります実装するのは簡単では、特殊なアクション(すなわち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())); 
} 

長所:重複呼び出し、少数の連結成分

短所:まだロード・チェックのたくさんの問題を抱えています。呼び出しが失敗した場合は情報が失われる可能性があります。オプションBと同様が、ユーザデータをフェッチするPromise.allを使用し、唯一の成功コール(ディスパッチ(fetchPostsWithUserDataSuccess()を持っている)

:密結合ポストは

オプションCをフェッチユーザデータの呼び出し長所:ローディングチェックが少ない、部分的に欠けているデータはありません。

短所:フェッチが失敗した場合、すべてのデータを再フェッチする必要があります。すべてのデータを再フェッチする必要があります。データが利用可能になる前に完了するための呼び出し。

私はこのトピックに関する情報を見つけるために全然しようとしましたが、私はそれが一般的なケースであると想像して私を驚かせる情報を見つけることができませんでした。私は問題を説明するための正しい用語を知らないだけかもしれません。その場合、正しい用語を知っていることを非常に感謝しています。

答えて

0

オプションAは、各コンテナコンポーネントを別々に再利用できるため、適切です。debounce fetch呼び出しが必要なので、同じ呼び出しが同時に複数回実行されることはありません。

関連する問題