Redux 상태 유지

Persist Redux 상태는 무엇을 의미하나요?

React 애플리케이션의 일반적인 과제 중 하나는 페이지를 다시 로드한 후 또는 사용자 세션 사이에 Redux 상태를 다시 수화하는 것입니다. 일반적인 해결 방법은 API 호출을 통해 데이터를 다시 가져와 Redux 상태에 저장하는 것입니다. 그러나 이제 Persisted Redux State라는 기술을 사용하여 추가 API 호출 없이 Redux 상태를 재수화할 수 있습니다.

redux-persist 패키지

이 패키지와 일반적인 redux 패키지인 @reduxjs/toolkit 및 React-redux를 사용하여 페이지를 다시 로드하거나 브라우저의 사용자 세션 전반에 걸쳐 지속될 수 있는 redux 상태를 생성할 수 있습니다.

전제 조건

• 실행 중인 React 애플리케이션이 있습니다.

설치

지속적인 Redux 상태를 설정하는 데 필요한 모든 패키지를 설치하려면 이 명령을 사용하세요.

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

지속적인 Redux 상태 설정

1.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

참고: redux가 다시 로드하는 동안뿐 아니라 브라우저의 사용자 세션 간에도 유지되도록 하려면

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

로 가져오기

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

2.루트 구성 요소 [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>);

완료! 지속적인 redux 상태가 준비되었습니다.

위 내용은 Redux 상태 유지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!