Redux-Status beibehalten

Was bedeutet der Status „Persist Redux“?

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.

Das redux-persist-Paket

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.

Voraussetzungen

• Sie haben eine laufende React-Anwendung.

Installationen

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

Einrichten eines persistenten Redux-Zustands

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!