Heim > Web-Frontend > js-Tutorial > Hauptteil

Redux-Status beibehalten

WBOY
Freigeben: 2024-08-21 06:00:37
Original
499 Leute haben es durchsucht

Persist Redux State

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren


importieren mit

import storageSession from "redux-persist/lib/storage"; // local storage
Nach dem Login kopieren

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>);
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage