Conserver l'état Redux

Que signifie l’état Persist Redux ?

Un défi courant dans les applications React est de réhydrater l'état Redux après le rechargement d'une page ou entre les sessions utilisateur. Une solution de contournement typique consiste à récupérer les données via un appel API et à les stocker dans l'état Redux. Cependant, vous pouvez désormais réhydrater l'état Redux sans appels d'API supplémentaires en utilisant une technique appelée Persisted Redux State.

Le paquet redux-persist

Ce package et les packages redux typiques @reduxjs/toolkit et react-redux peuvent être utilisés pour créer un état redux qui peut persister tout au long du rechargement de la page ou de la session utilisateur dans le navigateur.

Conditions préalables

• Vous avez une application React en cours d'exécution.

Installations

Utilisez cette commande pour installer tous les packages nécessaires pour configurer un état redux persistant.

npm i --save @reduxjs/toolkit react-redux redux-persist

Configuration d'un état Redux persistant

1.Configurez votre boutique Redux [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

REMARQUE : Si vous souhaitez que votre redux persiste non seulement entre les rechargements mais également entre les sessions utilisateur dans le navigateur, remplacez le

import storageSession from "redux-persist/lib/storage/session"; // session storage

importer avec

import storageSession from "redux-persist/lib/storage"; // local storage

2.Enveloppez votre composant racine [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>);

et c'est fait ! votre état redux persistant est prêt.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!