Redux-persist(v6) 자세히 보기(React)

앱을 다시 로드할 때마다 javascript 프로세스는 메모리에 아무것도 없습니다. 상태를 다시 초기화해야 하며 URL을 기반으로 일부 기본 상태를 설정할 수도 있습니다(브라우저에 있는 경우). 일반적으로 이것이 원하는 것이지만 브라우저 창을 다시 로드할 때에도 redux 상태를 유지하려는 많은 사용 사례가 있습니다.

전역 상태 관리를 위해 redux를 사용하는 웹 응용 프로그램에서 새로 고침을 통해 상태를 유지한다는 아이디어는 redux-persist npm 패키지를 사용하여 달성할 수 있습니다.

전체 redux-store 또는 일부 특정 부분을 브라우저 localstorage에 쉽게 유지할 수 있습니다!

2020년에 redux-persist를 구현하는 매우 일반적인 사용 사례는 다음과 같습니다.

Offline First. Many users may not have stable internet connection. Persistence is the first step of offline support.

좋습니다. 소개는 여기까지입니다. 이제 react-redux 애플리케이션에서 redux-persist를 설정해 보겠습니다.

react-redux 앱을 설정하려면 this을 확인하세요.
또는 복제repo

1단계 - redux-persist 설치

npm install redux-persist

또는

yarn add redux-persist

2단계 - redux-store 구성

// store.js

import { createStore, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist' // imports from redux-persist
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import rootReducer from './reducers' // Root reducer

const persistConfig = { // configuration object for redux-persist
    key: 'root',
    storage, // define which storage to use
}

const persistedReducer = persistReducer(persistConfig, rootReducer) // create a persisted reducer

const store = createStore(
    persistReducer, // pass the persisted reducer instead of rootReducer to createStore
    applyMiddleware() // add any middlewares here
)

const  persistor = persistStore(store); // used to create the persisted store, persistor will be used in the next step

export {store, persistor}

persistConfig 개체는 필수이므로 제대로 작동하려면 키와 저장소가 필요하지만 추가 사용자 지정을 위해 다른 키 값 쌍을 사용할 수도 있습니다. 그 중 일부는 다음과 같습니다.

블랙리스트:

example:
// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation'] // navigation will not be persisted
};

허용 목록:

example:
// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};

Note: if you are using react native then your persistConfig will look like this (see docs):

import AsyncStorage from '@react-native-community/async-storage';

const persistConfig = {
    >       key: 'root',
    >       storage: AsyncStorage
    >}

3단계 - 루트 구성 요소를 PersistGate로 래핑

반응을 사용하는 경우 루트 구성 요소(최상위 구성 요소)를 PersistGate로 래핑합니다. 이렇게 하면 지속 상태가 검색되어 redux에 저장될 때까지 앱의 UI 렌더링이 지연됩니다.

NOTE the PersistGate's loading prop can alse be null, or any react instance, e.g. loading={<Loading />}
i.e it can be any react component, so you can add your custom loader as a component here.
If null is provided as a value then it simply loads nothing until persisted state is retrieved. (Don't worry if you don't have a custom loader yet, it hardly takes fraction of a second to retrieve a simple redux state)

import {store, persistor} from './redux/store'
import { PersistGate } from 'redux-persist/integration/react'

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}> // null passed to loading, persistor is being used here
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

축하합니다! 반응 앱에서 redux-persist 설정을 성공적으로 완료했습니다! 상당히 쉬웠죠? 에 대한 당신의 생각을 알려주세요

추가 리소스

1. Check out this great article to know how you can do versioning in your persisted localstorage using redux-persist. This usually comes in handy when you make some big changes in your redux state and its not compatible with the previously saved localstorage in production, so redux-persist has this good to have feature for versioning built in.
   
   
   

2. Docs

3. API

4. How to setup Redux with React (2020)