Tetap Redux State

Apakah maksud keadaan Persist Redux?

Satu cabaran biasa dalam aplikasi React ialah menghidrat semula keadaan Redux selepas muat semula halaman atau antara sesi pengguna. Penyelesaian biasa ialah mengambil semula data melalui panggilan API dan menyimpannya dalam keadaan Redux. Walau bagaimanapun, anda kini boleh menghidrat semula keadaan Redux tanpa panggilan API tambahan menggunakan teknik yang dipanggil Persisted Redux State.

Pakej redux-berterusan

Pakej ini dan pakej redux biasa @reduxjs/toolkit dan react-redux boleh digunakan untuk mencipta keadaan redux yang boleh berterusan merentasi muat semula halaman atau sesi pengguna dalam penyemak imbas.

Prasyarat

• Anda mempunyai aplikasi tindak balas yang sedang berjalan.

Pemasangan

Gunakan arahan ini untuk memasang semua pakej yang diperlukan untuk menyediakan keadaan redux yang berterusan.

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

Menyediakan Keadaan Redux Berterusan

1.Konfigurasikan kedai redux anda [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

NOTA: Jika anda mahu redux anda berterusan bukan sahaja antara muat semula tetapi juga antara sesi pengguna dalam penyemak imbas gantikan

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

import dengan

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

2. Balut Komponen Root anda [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>);

dan selesai! keadaan redux berterusan anda sudah sedia.

Atas ialah kandungan terperinci Tetap Redux State. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!