[flutter] Redux Store의 상태를 로컬 스토리지에 저장하는 방법은 무엇인가요?

Redux는 상태 관리 패턴 중 하나로, 애플리케이션의 상태를 중앙 저장소인 ‘스토어’에 저장하고 관리합니다. 하지만 앱을 종료하거나 다시 시작할 때마다 Redux 스토어가 초기화되는 문제가 있을 수 있습니다. 이를 해결하기 위해 Redux Store의 상태를 로컬 스토리지에 저장하는 방법을 살펴보겠습니다.

1. flutter_secure_storage 패키지 설치

먼저 로컬 스토리지에 상태를 저장하기 위해 flutter_secure_storage 패키지를 설치해야 합니다. 이 패키지는 안전하게 키-값 쌍을 저장하기 위한 기능을 제공합니다.

dependencies:
  flutter_secure_storage: ^5.0.0

pubspec.yaml 파일의 dependencies 섹션에 위의 코드를 추가하고, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. 저장 및 불러오기

Redux Store의 상태를 로컬 스토리지에 저장하기 위해 앱이 종료될 때마다 상태를 저장하고, 앱이 시작될 때마다 저장된 상태를 불러오는 로직을 작성해야 합니다.

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

final storage = FlutterSecureStorage();

void saveStateToLocalStorage(dynamic state) async {
  await storage.write(key: 'redux_state', value: jsonEncode(state));
}

Future<dynamic> loadStateFromLocalStorage() async {
  String stateJson = await storage.read(key: 'redux_state');
  if (stateJson != null) {
    return jsonDecode(stateJson);
  }
  return null;
}

// 앱이 시작될 때 저장된 상태를 불러온다
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final savedState = await loadStateFromLocalStorage();
  final store = Store<AppState>(...);

  // 처음 시작할 때 저장된 상태가 있다면 Redux Store에 적용한다
  if (savedState != null) {
    store.dispatch(InitializeAction(savedState));
  }

  runApp(MyApp());
}

// 앱이 종료될 때 상태를 저장한다
class MyApp extends StatelessWidget {
  final store = Store<AppState>(...);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: StoreProvider(
        store: store,
        child: WillPopScope(
          onWillPop: () async {
            saveStateToLocalStorage(store.state);
            return true;
          },
          child: MyHomePage(),
        ),
      ),
    );
  }
}

위의 코드는 flutter_secure_storage 패키지를 사용하여 Redux Store의 상태를 로컬 스토리지에 저장하고 불러오는 방법을 보여줍니다.

저장된 상태가 있을 경우 앱이 시작될 때 Redux Store에 적용되고, 앱이 종료될 때마다 상태가 저장됩니다. 이를 통해 상태의 지속성을 보장할 수 있습니다.

참고 자료