Flutter의 Redux 패턴 사용법

Flutter에서 Redux 패턴은 상태 관리와 비즈니스 로직을 분리하여 애플리케이션의 유지 보수성과 확장성을 향상시키는 데 도움이 되는 디자인 패턴입니다. Redux는 주로 대규모 애플리케이션에서 상태 관리를 일관되고 예측 가능하게 만드는 데 사용됩니다. 이번 글에서는 Flutter에서 Redux 패턴을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Redux 패턴의 기본 개념

Redux는 상태 관리 패턴으로, 애플리케이션의 상태를 중앙에서 관리하고, 상태 변화를 예측 가능하게 만듭니다. Redux 패턴은 크게 세 가지 구성 요소로 나뉩니다:

• State: 애플리케이션의 전체 상태를 나타냅니다.
• Action: 상태를 변경하기 위해 발생하는 이벤트를 나타냅니다.
• Reducer: 액션을 처리하여 새로운 상태를 반환하는 함수입니다.

2. Redux 패키지 설치

먼저, flutter_redux 패키지와 redux 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_redux: ^0.8.2
  redux: ^4.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Counter 예제 구현

이제 Redux 패턴을 사용하여 간단한 카운터 애플리케이션을 구현해보겠습니다.

 

Step 1: State 정의

애플리케이션의 상태를 나타내는 클래스를 정의합니다.

class AppState {
  final int counter;

  AppState({required this.counter});

  AppState.initialState() : counter = 0;
}

 

Step 2: Action 정의

상태를 변경하기 위해 발생하는 액션을 정의합니다.

 

class IncrementAction {}
class DecrementAction {}

 

Step 3: Reducer 정의

액션을 처리하여 새로운 상태를 반환하는 리듀서를 정의합니다.

 

AppState counterReducer(AppState state, dynamic action) {
  if (action is IncrementAction) {
    return AppState(counter: state.counter + 1);
  } else if (action is DecrementAction) {
    return AppState(counter: state.counter - 1);
  }
  return state;
}

 

Step 4: Store 생성

상태와 리듀서를 기반으로 스토어를 생성합니다.

import 'package:redux/redux.dart';

final store = Store<AppState>(
  counterReducer,
  initialState: AppState.initialState(),
);

 

 

반응형

 

 

 

Step 5: UI 구현

이제 Redux를 사용하여 UI를 구현합니다.

 

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

void main() {
  final store = Store<AppState>(
    counterReducer,
    initialState: AppState.initialState(),
  );

  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<AppState> store;

  MyApp({required this.store});

  @override
  Widget build(BuildContext context) {
    return StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Redux Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            StoreConnector<AppState, int>(
              converter: (store) => store.state.counter,
              builder: (context, counter) {
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              StoreProvider.of<AppState>(context).dispatch(IncrementAction());
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              StoreProvider.of<AppState>(context).dispatch(DecrementAction());
            },
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 StoreProvider와 StoreConnector를 사용하여 Redux와 UI를 연결합니다. StoreProvider는 스토어를 위젯 트리에 공급하고, StoreConnector는 상태 변화를 구독하여 UI를 업데이트합니다.

4. Middleware를 사용한 비동기 작업 처리

Redux에서 미들웨어는 액션이 리듀서에 도달하기 전에 처리되는 추가 로직을 정의할 수 있습니다. 이를 통해 비동기 작업을 처리할 수 있습니다.

 

import 'package:redux/redux.dart';

class FetchDataAction {}
class DataFetchedAction {
  final String data;
  DataFetchedAction(this.data);
}

AppState dataReducer(AppState state, dynamic action) {
  if (action is DataFetchedAction) {
    // 새로운 상태를 반환
  }
  return state;
}

void fetchDataMiddleware(Store<AppState> store, dynamic action, NextDispatcher next) {
  if (action is FetchDataAction) {
    // 비동기 작업 수행
    Future.delayed(Duration(seconds: 2), () {
      store.dispatch(DataFetchedAction('Fetched Data'));
    });
  }
  next(action);
}

final store = Store<AppState>(
  dataReducer,
  initialState: AppState.initialState(),
  middleware: [fetchDataMiddleware],
);

 

위 코드는 미들웨어를 사용하여 비동기 작업을 처리하는 예제입니다. fetchDataMiddleware는 FetchDataAction을 처리하여 비동기 작업을 수행하고, 완료되면 새로운 액션을 디스패치합니다.

5. Redux 패턴의 장점

• 상태 관리의 일관성: Redux는 애플리케이션의 상태를 일관되게 관리할 수 있습니다.
• 중앙 집중화된 상태: 모든 상태가 중앙에서 관리되어 상태 변화를 추적하고 디버깅하기 쉽습니다.
• 미들웨어를 통한 확장성: 미들웨어를 사용하여 비동기 작업이나 로깅 등의 추가 로직을 쉽게 통합할 수 있습니다.

6. Redux 패턴의 단점

• 초기 설정 복잡성: Redux 패턴을 처음 설정하는 데는 다소 복잡할 수 있습니다.
• 코드 양 증가: 액션, 리듀서, 스토어를 정의해야 하므로 코드 양이 증가할 수 있습니다.

결론

Redux 패턴은 Flutter 애플리케이션에서 상태를 중앙에서 관리하고 일관되게 유지하는 강력한 도구입니다. 상태, 액션, 리듀서, 미들웨어 등을 정의하여 Redux 패턴을 구현할 수 있으며, 이를 통해 애플리케이션의 유지 보수성과 확장성을 향상시킬 수 있습니다. Redux 패턴을 적절히 활용하여 대규모 애플리케이션에서도 일관되고 예측 가능한 상태 관리를 구현해보세요.