はじめに
現在React+Reduxを使用したSPA を作成中です。
ここやFlux公式を読んでみると
「Storeは画面単位でなくドメイン単位でデータを保持する設計が良いよ」
と書いてあります。(画面で必要なものはデータと別に保存する)
私の認識では
StoreをDB的にデータを保持させ(少し語弊がありますが)
各画面用が使いたい形にstateを変形させることなのだと思っています。
書いてある事はとても理解できるのですが
実際の実装に落とす際に不明点があります。
前提
よくある「検索画面 → 詳細画面」という流れの実装です。(その他の画面もあるが趣旨と関係なし)
検索画面で操作した結果Storeが以下の状態だとします
javascript
1const state = { 2 searchResultIds: [ 3 'xxxxx', 'yyyyy', 4 ], 5 entities: { 6 items: [{ 7 id: 'xxxxx', 8 text: 'xxxxxテキスト', 9 },{ 10 id: 'yyyyy', 11 text: 'yyyyyテキスト', 12 }], 13 }, 14};
この状態で
https://example.com/item/xxxxx
へアクセスした場合に
画面へ「xxxxxテキスト」と表示します。
悩み: 詳細画面アクセス時のデータの最新化
実装内容は詳細画面用のmapStateToProps
で
state.entities.items
からid = xxxxx
を取得しComponentへ渡します。
しかし、これだとデータが古くなっている可能性があります。
(さらに言えばURLへの直アクセス時には、そもそもStoreが空っぽ)
そこで、詳細ページアクセス時にItemsAPIから最新のxxxxxの情報を取得後、
該当Itemを更新し表示しようと思います。
こういった設計は間違っていませんか?一般的でしょうか?
ただ、こうなってしまうとstoreの情報は実質検索画面でしか利用されなくなるため
reduxを使う必要すらないのでは・・・と感じてしまいます。
PS. 参考となるプロジェクトやWEBサイトがあれば教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/23 01:39