Redux：アンマウントコンポーネントとして状態の一部を削除しますか？

Question

私は現在、react、redux、およびreact-routerでアプリを書いています。

アプリのルート（またはサブルート）の多くは、最終的に自分のレデューサーが組み合わされたレフィックスストアの状態を記入してください。

しかし、しばしば、ルーティングされたコンポーネントによって管理される状態の部分は、このコンポーネントに固有であり、コンポーネントがアンマウントされた後には「削除可能」です。

私はユーザーが別の画面を閲覧すると、彼は未使用のデータで状態を埋めて、アプリケーション全体を膨らませてしまうのではないかと心配しています。だから私は未使用の州の一部を落とす方法を考えている。

複数の異なるエンティティ（質問、投稿、画像、...）のCRUDアプリを紹介しましょう。私は質問を掲載していますが、州の投稿を持つ必要はないかもしれませんし、その逆もあります。 Questionリストに移行中に投稿リストを削除する必要がありますか？

これは悪い習慣ですか？これを行うには良い方法がありますか？あなたはどう思いますか？

Answer 1

何万ものレコードを扱っているのでなければ、おそらくその努力に値するものではなく、コードを複雑にするでしょう。これがあなたのアプリの本当の問題だと確信していますか？古い状態を維持すると、実際に便利です。インスタント "戻る"ボタン。

あなたが強く感じているのであれば、特定のコンポーネントをアンマウントするときやルートを変更したときにクリーンアップアクションを送信することができます。しかし、大部分のアプリではこれは不要であると思います。マウント後に新しいアイテムをチェックすることを忘れない限り、キャッシュを保持する方が望ましいかもしれません。

Answer 2

あなたのデータは詳細コンポーネント（ないマスター）にロードされた場合、私はそれが状態を復元するOKだと思います。

詳細コンポーネントの状態は実際には 'キャッシュされません'。そのため、同じリソースをに表示しても、データは再びダウンロードされます。に別のリソースが表示される場合、最後に訪問したリソースの残存状態は、現在のリソースのデータがダウンロードされ、ユーザーに配線されるまで残ります。

1つのアプローチは、詳細コンポーネントをアンマウントするときの状態を復元するアクション/レデューサを定義することです。

もう一つの方法は、時にルート変更の状態を復元することです：

import { LOCATION_CHANGE } from 'react-router-redux' 
 
import * as types from 'constants/ActionTypes' 
 

 
const initialState = {} 
 

 
export default function show(state = initialState, action) { 
 

 
    switch (action.type) { 
 

 
    case types.LOGOUT: 
 
    case LOCATION_CHANGE: 
 
     return initialState 
 

 
    case types.SHOW_SUCCESS: 
 
     return action.payload 
 

 
    default: 
 
     return state 
 
    } 
 
}