[解決済み] reduxのステートツリーをリフレッシュ時に持続させるには？

質問

Reduxドキュメントの第一原則は。

アプリケーション全体の状態は、1つのストア内のオブジェクトツリーに格納されます。

そして実際、私はすべての原則をよく理解していると思っていました。 しかし、アプリケーションとは何を意味するのか、今になって混乱しています。

アプリケーションが、ウェブサイト内のちょっとした複雑な部分の1つを意味し、1つのページだけで動作するのであれば、私は理解できます。しかし、アプリケーションが Web サイト全体を意味する場合はどうでしょうか。状態ツリーを保持するために LocalStorage またはクッキーか何かを使用する必要があるのでしょうか？しかし、ブラウザがLocalStorageをサポートしていない場合はどうすればよいのでしょうか？

開発者がどのようにステートツリーを保持するのか知りたいです！ :)

どのように解決するのですか？

ブラウザの更新をまたいで redux の状態を持続させたい場合は、redux ミドルウェアを使用するのが最善です。このような場合は redux-persist と redux-storage というミドルウェアがあります。これらはどちらも redux の状態を保存し、自由に保存・読み込みができるようにするという同じタスクを達成しようとするものです。

--

編集

この質問を再検討してからしばらく経ちますが、他の（より多くのupvoted回答があるにもかかわらず）独自のソリューションをロールバックすることを奨励しているのを見て、私は再びこれに答えることを考えました。

この編集の時点では、両方のライブラリは過去 6 か月以内に更新されています。私のチームは数年前から本番環境で redux-persist を使用していますが、何の問題もありません。

単純な問題のように見えるかもしれませんが、独自のソリューションをロールバックすると、メンテナンスの負担になるだけでなく、バグやパフォーマンスの問題が発生することにすぐに気づくでしょう。最初に思い浮かぶ例は、次のとおりです。

1. JSON.stringify そして JSON.parse は、必要ないときにパフォーマンスを低下させるだけでなく、reduxストアのような重要なコードで処理されないと、アプリケーションをクラッシュさせる可能性のあるエラーを投げます。
2. (以下の回答で部分的に言及されています)。いつ、どのようにアプリの状態を保存して復元するかを見つけ出すことは、単純な問題ではありません。あまり頻繁に行うと、パフォーマンスが低下します。十分でない場合、または状態の間違った部分が永続化された場合、さらに多くのバグが発生する可能性があります。上記のライブラリは、そのアプローチにおいて実戦テスト済みであり、動作をカスタマイズするためのかなり確実な方法を提供しています。
3. reduxの美しさの一部は（特にReactエコシステムにおいて）、複数の環境に配置することができることです。この編集の時点では、redux-persistには 15種類のストレージ実装 があり、その中には素晴らしい localForage ライブラリ をはじめ、React Native、Electron、Nodeのサポートがあります。

まとめると は 3kB minified + gzipped です。 (この編集の時点では) これは私のチームに自分で解決するように求める問題ではありません。