Redux Toolkit은 일련의 유틸리티와 규칙을 제공하여 Redux 개발을 단순화하는 인기 있는 라이브러리입니다. 여기에는 Redux 로직 작성 프로세스를 간소화하는 리듀서 및 액션 생성 패턴이 포함되어 있습니다. Redux Persist와 Redux Toolkit을 결합하면 React Native 앱의 상태 관리 효율성과 안정성을 크게 향상시킬 수 있습니다.

expo-file-system은 기기에 로컬로 저장된 파일 시스템에 대한 액세스를 제공합니다. 또한 네트워크 URL에서 파일을 업로드하고 다운로드할 수도 있습니다

redux-persist-expo-file-system-storage는 Expo의 파일 시스템 API를 사용하는 redux-persist용 스토리지 엔진입니다. 이를 통해 Redux 저장소의 상태를 기기의 파일 시스템에 유지할 수 있으므로 앱이 닫히거나 다시 시작되더라도 상태가 저장되고 복원됩니다.

Redux Toolkit 스토어를 구성하고 나면 Redux Persist를 통합할 수 있습니다. 필요한 종속성을 설치하여 시작하십시오:

npm i @reduxjs/toolkit 
npm i expo-file-system 
npm i redux-persist-expo-file-system-storage
npm i redux-persist

카운터 상태를 관리하기 위해 간단한 Redux 스토어 @reduxjs/toolkit을 만듭니다. 카운트가 0인 초기 상태를 정의하고 카운트를 각각 1씩 증가 및 감소시키는 두 개의 감소기(증가 및 감소)가 있는 counter라는 슬라이스를 만듭니다. 작업과 리듀서를 Redux 설정에서 사용하기 위해 내보내므로 애플리케이션 전체에서 카운터 상태를 쉽게 관리할 수 있습니다.

// store/counter/counter.tsx
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
};

const counterSlice = createSlice({
  name: "couter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count  = 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

이 코드는 @reduxjs/toolkit을 사용하여 React Native 앱에 Redux 저장소를 설정하고 영구 저장을 위해 Expo의 FileSystem과 함께 redux-persist를 설정합니다. 카운터 리듀서를 포함한 리듀서를 결합하고 해당 상태가 앱 파일 시스템 내의 지정된 디렉터리에 저장되고 로드되도록 합니다.

// store/ConfigureStore.js
import { combineReducers } from "@reduxjs/toolkit";
import { documentDirectory, EncodingType } from "expo-file-system";
import { createExpoFileSystemStorage } from "redux-persist-expo-file-system-storage";

import CounterReducer from "./counter/counter";
import { persistReducer } from "redux-persist";
console.log('Document Directory:',documentDirectory);
export const expoFileSystemStorage = createExpoFileSystemStorage({
  storagePath: `${documentDirectory}customPathName/`,
  encoding: EncodingType.UTF8,
  debug: true,
});
const persist = (key, reducer) =>
  persistReducer(
    {
      key,
      storage: expoFileSystemStorage,
    },
    reducer
  );

const combinePersistReducers = (keys) =>
  Object.keys(keys).reduce(
    (obj, key) => ({
      ...obj,
      [key]: persist(key, keys[key]),
    }),
    {}
  );

const reducers = combineReducers({
  ...combinePersistReducers({
    count: CounterReducer,
  }),
});

export default reducers;

이 설정 부분에서는 @reduxjs/toolkit을 사용하여 Redux 스토어를 구성하고 생성합니다. redux-persist로 인한 직렬화 오류를 방지하기 위해 감속기를 결합하고 serializedCheck 미들웨어를 비활성화하는 rootReducer를 가져옵니다. 또한 상태 지속성을 활성화하고 React Native 애플리케이션과 통합하기 위해 저장소와 지속자를 모두 내보내도록 redux-persist를 설정했습니다. 이 구성을 사용하면 앱을 닫거나 새로 고친 후에도 앱 상태가 유지됩니다.

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import { persistStore } from "redux-persist";
import { Provider } from "react-redux";
import rootReducer from "./ConfigureStore";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});
const persistor = persistStore(store);

export { store, persistor };

configureStore 파일의 documentDirectory 경로를 기록하고 이해함으로써 Redux Persist 데이터가 Expo 환경에 저장되는 위치에 대한 귀중한 통찰력을 얻을 수 있습니다. 이 지식은 디버깅에 도움이 될 뿐만 아니라 데이터 지속성 전략이 강력하고 안전하다는 것을 보장합니다. 이제 데이터가 어디에 있는지 정확히 파악하여 자신 있게 앱 상태를 관리할 수 있습니다.

이 디렉토리 내에서 redux-persist는 지속된 상태를 저장합니다. 일반적으로 지속형 데이터는 persist-counter(또는 구성에 따라 유사한 이름)라는 파일에 저장됩니다. 이 파일을 탐색하고 보는 방법은 다음과 같습니다.

// persist-count file

{"count":"0","_persist":"{\"version\":-1,\"rehydrated\":true}"}

전체 예를 보려면 이 프로젝트의 GitHub 저장소를 확인하세요. GitHub 저장소 링크

? 이 주제에 대한 귀하의 생각을 듣고 싶습니다! Redux Persist와 함께 Expo File System을 사용하는 것에 대해 질문이 있거나 문제가 발생하는 경우 아래에 의견을 남겨주세요. 나는 도와주러 왔습니다! ?