Reduxドキュメントの最初の原則は次のとおりです。
アプリケーション全体の状態は、単一のストア内のオブジェクトツリーに保存されます。
そして、私は実際に私がすべての校長をよく理解していると思いました。しかし、私は今、アプリケーションが何を意味するのか混乱しています。
アプリケーションがウェブサイトの少し複雑な部分の1つにすぎず、1ページで機能する場合、私は理解しています。しかし、アプリケーションがWebサイト全体を意味する場合はどうでしょうか。状態ツリーを維持するためにLocalStorageやCookieなどを使用する必要がありますか？しかし、ブラウザがLocalStorageをサポートしていない場合はどうなりますか？
開発者がどのように状態ツリーを保持しているか知りたいです！:)
回答:
ブラウザの更新後もreduxの状態を維持したい場合は、reduxミドルウェアを使用してこれを行うのが最善です。redux-persistとredux-storageミドルウェアをチェックしてください。どちらも、reduxの状態を保存するという同じタスクを実行して、自由に保存およびロードできるようにします。
-
編集
私がこの質問を再検討してからしばらく経ちましたが、他の質問（より賛成の回答ではありますが）があなた自身の解決策を転がすことを奨励しているのを見て、私はこれにもう一度答えると思いました。
この編集の時点で、両方のライブラリが過去6か月以内に更新されています。私のチームは、数年前から本番環境でredux-persistを使用しており、問題はありませんでした。
単純な問題のように見えるかもしれませんが、独自のソリューションをローリングすると、メンテナンスの負担が発生するだけでなく、バグやパフォーマンスの問題が発生することがすぐにわかります。頭に浮かぶ最初の例は次のとおりです。
JSON.stringifyまた、JSON.parse不要なときにパフォーマンスを低下させるだけでなく、reduxストアなどの重要なコードで処理しないとアプリケーションがクラッシュする可能性があるエラーをスローする可能性があります。要約すると、3kBの縮小+ gzip圧縮（この編集の時点）の場合、これは問題ではありません。チームに解決を依頼します。
コメントの1つで述べられているように。元のredux-storageパッケージはreact-stackに移動されました。このアプローチは、独自の状態管理ソリューションの実装に引き続き焦点を当てています。
提供された回答はある時点で有効でしたが、元のredux-storageパッケージが非推奨になり、保守されなくなったことに注意することが重要です...
パッケージredux-storageの元の作成者は、プロジェクトを非推奨にすることを決定し、現在は維持されていません。
さて、将来このような問題を回避するために他のパッケージに依存したくない場合は、独自のソリューションをロールバックするのは非常に簡単です。
あなたがする必要があるのは：
1-ストアをハイドレイトするために、2番目のパラメーターで状態を返す関数を作成し、localStorageその状態をcreateStore'sredux関数に渡します。
const store = createStore(appReducers, state);
2-状態の変化をリッスンし、状態が変化するたびに、状態を localStorage
store.subscribe(() => {
//this is just a function that saves state to localStorage
saveState(store.getState());
});
そして、それだけです...私は実際に本番環境で同様のものを使用していますが、関数を使用する代わりに、以下のような非常に単純なクラスを作成しました...
class StateLoader {
loadState() {
try {
let serializedState = localStorage.getItem("http://contoso.com:state");
if (serializedState === null) {
return this.initializeState();
}
return JSON.parse(serializedState);
}
catch (err) {
return this.initializeState();
}
}
saveState(state) {
try {
let serializedState = JSON.stringify(state);
localStorage.setItem("http://contoso.com:state", serializedState);
}
catch (err) {
}
}
initializeState() {
return {
//state object
}
};
}
}
そして、アプリをブートストラップするとき...
import StateLoader from "./state.loader"
const stateLoader = new StateLoader();
let store = createStore(appReducers, stateLoader.loadState());
store.subscribe(() => {
stateLoader.saveState(store.getState());
});
それが誰かを助けることを願っています
アプリケーションで状態の変更が頻繁に発生する場合、特にシリアル化/逆シリアル化する状態オブジェクトグラフが大きい場合は、ローカルストレージに保存する頻度が高すぎると、アプリケーションのパフォーマンスが低下する可能性があります。このような場合はRxJs、lodashなどを使用して状態をlocalStorageに保存する関数をデバウンスまたはスロットルすることができます。
これは、Leoの回答に基づいています（サードパーティのライブラリを使用せずに質問の目的を達成するため、受け入れられた回答である必要があります）。
Reduxストアを作成し、ローカルストレージを使用して永続化し、ゲッターを介してストアに簡単にアクセスできるシングルトンクラスを作成しました。
これを使用するには、メインクラスの周りに次のRedux-Provider要素を配置するだけです。
// ... Your other imports
import PersistedStore from "./PersistedStore";
ReactDOM.render(
<Provider store={PersistedStore.getDefaultStore().store}>
<MainClass />
</Provider>,
document.getElementById('root')
);
次のクラスをプロジェクトに追加します。
import {
createStore
} from "redux";
import rootReducer from './RootReducer'
const LOCAL_STORAGE_NAME = "localData";
class PersistedStore {
// Singleton property
static DefaultStore = null;
// Accessor to the default instance of this class
static getDefaultStore() {
if (PersistedStore.DefaultStore === null) {
PersistedStore.DefaultStore = new PersistedStore();
}
return PersistedStore.DefaultStore;
}
// Redux store
_store = null;
// When class instance is used, initialize the store
constructor() {
this.initStore()
}
// Initialization of Redux Store
initStore() {
this._store = createStore(rootReducer, PersistedStore.loadState());
this._store.subscribe(() => {
PersistedStore.saveState(this._store.getState());
});
}
// Getter to access the Redux store
get store() {
return this._store;
}
// Loading persisted state from localStorage, no need to access
// this method from the outside
static loadState() {
try {
let serializedState = localStorage.getItem(LOCAL_STORAGE_NAME);
if (serializedState === null) {
return PersistedStore.initialState();
}
return JSON.parse(serializedState);
} catch (err) {
return PersistedStore.initialState();
}
}
// Saving persisted state to localStorage every time something
// changes in the Redux Store (This happens because of the subscribe()
// in the initStore-method). No need to access this method from the outside
static saveState(state) {
try {
let serializedState = JSON.stringify(state);
localStorage.setItem(LOCAL_STORAGE_NAME, serializedState);
} catch (err) {}
}
// Return whatever you want your initial state to be
static initialState() {
return {};
}
}
export default PersistedStore;