Eine häufige Herausforderung bei React-Anwendungen besteht darin, den Redux-Status nach dem Neuladen einer Seite oder zwischen Benutzersitzungen wiederherzustellen. Eine typische Problemumgehung besteht darin, die Daten über einen API-Aufruf erneut abzurufen und im Redux-Status zu speichern. Allerdings können Sie den Redux-Status jetzt ohne zusätzliche API-Aufrufe mit einer Technik namens Persisted Redux State wiederherstellen.
Dieses Paket und die typischen Redux-Pakete @reduxjs/toolkit und React-Redux können verwendet werden, um einen Redux-Status zu erstellen, der über das Neuladen der Seite oder die Benutzersitzung im Browser hinweg bestehen bleiben kann.
Verwenden Sie diesen Befehl, um alle erforderlichen Pakete zu installieren, um einen dauerhaften Redux-Status einzurichten.
npm i --save @reduxjs/toolkit react-redux redux-persist
1.Konfigurieren Sie Ihren Redux-Store [store.js].
import { combineReducers, configureStore } from "@reduxjs/toolkit"; import sampleSlice from "./sampleSlice"; import storageSession from "redux-persist/lib/storage/session"; // session storage import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist'; const rootReducer = combineReducers({ sample : sampleSlice.reducer; }) const persistConfig = { key:'root', storage: storageSession, } const persistedReducer = persistReducer(persistConfig, rootReducer) const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }) }) const persister = persistStore(store); export default store
HINWEIS: Wenn Sie möchten, dass Ihr Redux nicht nur zwischen den Neuladevorgängen, sondern auch zwischen den Benutzersitzungen im Browser bestehen bleibt, ersetzen Sie
import storageSession from "redux-persist/lib/storage/session"; // session storage
importieren mit
import storageSession from "redux-persist/lib/storage"; // local storage
2.Verpacken Sie Ihre Root-Komponente [index.js].
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { BrowserRouter } from 'react-router-dom'; import store, { persistor } from './store'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(<BrowserRouter> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider> </BrowserRouter>);
und fertig! Ihr persistenter Redux-Status ist bereit.
Das obige ist der detaillierte Inhalt vonRedux-Status beibehalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!