Redux-Persist : 어떻게 작동하고 어떻게 Persisted Store의 데이터가 변화하는지에 대하여

yes·2023년 3월 12일
0
post-thumbnail

Redux persist는 브라우저의 로컬 저장소에 Redux 저장소를 저장할 수 있는 라이브러리입니다.

그러나 redux-perist를 사용하고 스토어의 아키텍처를 변경하면 문제가 발생할 수 있습니다.

Steps of persistence:

Redux-perist를 사용한 지속성은 3가지 주요 단계(INIT, PERSIST and REHYDRATE)에서 발생합니다.

  1. "@@INIT"

    앱을 방문하는 동안 리듀스 스토어는 리듀서를 통해 주어진 초기 상태로 생성된다. 이것은 당신의 앱의 첫 번째 콘텐츠를 정의하며, 지속성은 아직 제 역할을 하지 못했다.

  2. "persist/PERSIST"
    PERSIST 단계 중에 모든 지속 저장소에 다음 구성으로 객체가 추가됩니다:

    The version has a default value of -1.

    rehydrated 값은 지속성이 적용되었는지 확인하는 데 사용되는 Bool이며 나중에 사용됩니다.

  3. "persist/REHYDRATE":

    이 단계에서는 브라우저에 저장된 지속 데이터(local Storage)가 Redux store의 데이터를 대체합니다.

    모든 reducers에서, 모든 local state는 “rehydrated"되고 persisted 저장소로 대체된다.

    각 reducer는 내용물을 persist되는 것으로 바꿉니다.

    따라서 탐색 세션 중에(또는 페이지를 새로 고치는 경우) 정보를 보관할 수 있습니다.

이제 스토리지에 가치가 있는 Redux 스토어가 있습니다.

Redux store의 아키텍처 수정

store 아키텍처에 영향을 미치는 새로운 기능을 개발하거나 스토어의 일부를 리팩토링하면 오래된 아키텍처와 새로운 푸시 아키텍처 간의 불일치가 트리거될 수 있습니다.

실제로 초기 상태는 코드의 새 버전을 나타내지만 rehydration하는 동안 모든 persisted store는 이전 아키텍처를 유지하면서 동일한 키 이름의 persisted store로 대체됩니다.

앱의 새 버전 구조를 가져야 할 변수 “number”는 오래된 persisted 구조로 대체된다. store의 모든 변경 사항을 잃게 됩니다.

Handling it with a version-controlled store.

Redux-persist를 사용하면 앱에 대해 원하는 버전에 따라 스토어를 변환할 수 있습니다. 스토어 버전을 제어할 수 있습니다.

이렇게 하려면 createMigrate() 함수를 사용하고 persistConfig 객체를 migrate 키로 전달합니다.

migration은 REHYDRAID 단계에서 저장소 데이터를 대체하기 전에 사용자의 상태에 적용됩니다.

storage가 기본 버전인 -1 버전의 store에서 제공되고 앱에 0 버전을 배포하는 경우 migration 0은 모든 사용자의 연결에서 storage state에 적용됩니다.

createMigrate() 함수를 사용하여 새 스토어에 맞게 지속적인 데이터 아키텍처를 변환할 수 있습니다: 이전 예에서 데이터를 유지하는 방법은 다음과 같습니다:

변경 사항을 기록하고 마이그레이션을 디버그하려면 디버그 버전을 true로 설정하여 마이그레이션이 적용되는 로그를 기록할 수 있습니다.

Step back

경우에 따라 마이그레이션을 사용하지 않을 수도 있습니다

이 문제를 더 빨리 해결할 수 있는 더 실용적인 해결책이 있습니다:

  • 사용자가 스토리지를 삭제하도록 합니다.
  • store의 지속성을 제거하고 새 키 이름 만들기. 사용자가 변경한 내용은 그대로 손실되므로 변경 내용에 따라 코드를 조정해야 합니다.
  • createTransform() 사용하기

reference

https://www.bam.tech/article/redux-persist-how-it-works-and-how-to-change-the-structure-of-your-persisted-store

0개의 댓글