更新時にredux状態をローカルストレージに保持し、アプリの読み込み時にローカルストレージからストアを初期化する必要があります。
最小限のReduxストアの永続性の例:
localStorageへの永続的な状態更新を処理するための「中間」コンポーネントを作成します。
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux];
const StorePersister = ({ children }) => {
const state = useSelector(state => state);
useEffect(() => {
localStorage.setItem('myState', JSON.stringify(state));
}, [state]);
return children;
};
index-App
をラップします ストア永続機能を備えたコンポーネント。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import StorePersister from './components/StorePersister';
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<StorePersister>
<App />
</StorePersister>
</Provider>,
document.getElementById('root')
);
ローカルストレージから状態を初期化します。 「myState」キーがない場合、または解析でnull
が返される場合 次に、空のオブジェクト({}
)はフォールバックとして使用されます。
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = JSON.parse(localStorage.getItem('myState')) || {};
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
(b&&a()) || compose
)
);
export default store;
redux-persist もあります 永続化され、永続化から初期化されるものを少しカスタマイズできるパッケージがあります。