[flutter] Flutter 앱에서 API 호출을 Redux로 처리하는 방법은 무엇인가요?

Redux는 상태 관리 패턴으로서, 어플리케이션의 데이터 흐름을 관리하기 위해 사용됩니다. Flutter에서 Redux를 사용하여 API 호출을 처리하려면 몇 가지 단계를 따라야 합니다.

  1. 먼저, flutter_redux 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가하세요:
dependencies:
  flutter_redux: any
  redux: any
  1. 앱의 상태를 정의하기 위해 Redux 앱 상태 클래스를 작성해야 합니다. 올바른 상태 클래스를 만들기 위해 앱의 데이터 구조와 요구사항을 고려하세요. 예를 들어, 사용자 데이터를 관리하기 위해 다음과 같은 클래스를 생성할 수 있습니다:
class UserState {
  final User? currentUser;
  final bool isLoading;
  
  UserState({this.currentUser, this.isLoading = false});
  
  UserState copyWith({
    User? currentUser,
    bool? isLoading,
  }) {
    return UserState(
      currentUser: currentUser ?? this.currentUser,
      isLoading: isLoading ?? this.isLoading,
    );
  }
}
  1. API 호출을 위한 액션과 리듀서를 작성하세요. 액션은 앱의 상태를 변경하는 동작을 정의하며, 리듀서는 액션을 처리하는 논리를 구현합니다. 예를 들어, 사용자 정보를 가져오는 API 호출을 처리하기 위해 다음과 같은 액션과 리듀서를 작성할 수 있습니다:
// 액션 정의
class FetchUserAction {}

// 리듀서 정의
UserState userReducer(UserState state, dynamic action) {
  if (action is FetchUserAction) {
    // API 호출 시작
    return state.copyWith(isLoading: true);
  }
  
  if (action is FetchUserSuccessAction) {
    // API 호출 완료
    return state.copyWith(currentUser: action.user, isLoading: false);
  }
  
  if (action is FetchUserFailureAction) {
    // API 호출 실패
    return state.copyWith(isLoading: false);
  }
  
  return state;
}
  1. 앱의 미들웨어에 Redux thunk를 설정하세요. Redux thunk는 비동기 작업을 처리하기 위해 사용됩니다. 앱의 main.dart 파일을 열고 다음과 같이 미들웨어를 설정하세요:
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';

void main() {
  final store = Store<UserState>(
    userReducer,
    initialState: UserState(),
    middleware: [thunkMiddleware],
  );
  
  runApp(FlutterReduxApp(store: store));
}
  1. API 호출을 수행하는 액션을 작성하세요. 액션 생성 함수를 작성하여 API 호출을 수행하고 액션을 디스패치합니다. 다음은 사용자 정보를 가져오는 API 호출을 수행하는 액션 생성 함수의 예입니다:
Future<void> fetchUserAction(BuildContext context) async {
  final userRepository = UserRepository();
  
  StoreProvider.of<UserState>(context).dispatch(FetchUserAction());

  try {
    final user = await userRepository.fetchUser();
    StoreProvider.of<UserState>(context).dispatch(FetchUserSuccessAction(user));
  } catch (e) {
    StoreProvider.of<UserState>(context).dispatch(FetchUserFailureAction());
  }
}

위의 예제에서 UserRepository는 실제 API를 호출하여 사용자 정보를 가져오는 책임을 가지는 클래스입니다.

  1. 마지막으로, 앱의 위젯에서 Redux를 사용하여 API 호출을 처리하세요. 필요한 위젯에서 StoreProvider 위젯을 사용하여 Redux 스토어를 공급하고 Connect 위젯을 사용하여 상태와 액션을 구독하고 디스패치할 수 있습니다.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreProvider<UserState>(
      store: store,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Redux API 호출 예제'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                StoreConnector<UserState, User?>(
                  builder: (context, user) => Text(user?.name ?? ''),
                  converter: (store) => store.state.currentUser,
                ),
                ElevatedButton(
                  onPressed: () => fetchUserAction(context),
                  child: Text('사용자 정보 불러오기'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제에서 StoreConnector는 Redux 스토어에서 상태를 가져와 사용자 이름을 표시하도록 위젯을 빌드합니다. fetchUserAction 함수는 사용자 정보를 불러오기 위한 액션을 디스패치합니다.

이제 Redux를 사용하여 Flutter 앱에서 API 호출을 처리하는 방법을 알게 되었습니다. 상태 관리와 비동기 작업을 효율적으로 처리하는 Redux를 사용하면 앱의 코드를 더 깔끔하게 구성할 수 있습니다. 이러한 패턴을 사용하면 UI를 업데이트할 때 일관성을 유지하면서 앱의 복잡성을 줄일 수 있습니다. 참고 자료로 공식 Flutter Redux 패키지 문서를 참조하시기 바랍니다.