[flutter] 플러터에서 Redux를 사용한 실제 예시는 어떤 것이 있나요?

Redux는 상태 관리 패턴으로, 앱의 상태를 중앙 집중식으로 관리하기 위해 널리 사용되는 라이브러리입니다. 플러터에서 Redux를 사용하면 앱의 상태를 예측 가능하고 일관성 있게 유지할 수 있으며, 상태 변경이 쉬워지고 앱의 복잡성을 줄일 수 있습니다.

플러터에서 Redux를 사용한 실제 예시로는 To-do 리스트 앱이 있습니다. 여기에서는 Redux를 사용하여 앱의 상태를 관리하고, 사용자가 추가, 편집 또는 삭제하는 작업에 따라 상태가 업데이트되는 것을 보여줍니다.

먼저, Redux에서 사용하는 세 가지 개념을 알아보겠습니다.

  1. 액션 (Actions): 액션은 상태 변경을 나타내는 객체입니다. 예를 들어, “할 일 추가” 액션이나 “할 일 삭제” 액션 등이 있을 수 있습니다.

  2. 리듀서 (Reducers): 리듀서는 액션에 대한 상태 변경 로직을 담당합니다. 액션이 발생하면 리듀서에서 해당 액션에 따라 상태에 변화를 주게 됩니다.

  3. 스토어 (Store): 스토어는 애플리케이션의 상태를 저장하고, 액션을 디스패치하여 상태 변경을 관리하는 역할을 합니다.

이제, 플러터에서 Redux를 사용하여 To-do 리스트 앱을 만드는 예시 코드를 살펴보겠습니다.

// 액션
class AddTodoAction {
  final String todo;

  AddTodoAction(this.todo);
}

class RemoveTodoAction {
  final String todo;

  RemoveTodoAction(this.todo);
}

// 리듀서
List<String> todoReducer(List<String> state, dynamic action) {
  if (action is AddTodoAction) {
    return List<String>.from(state)..add(action.todo);
  } else if (action is RemoveTodoAction) {
    return List<String>.from(state)..remove(action.todo);
  }
  return state;
}

// 스토어
final store = Store<List<String>>(todoReducer, initialState: []);

// 사용 예시
void main() {
  store.dispatch(AddTodoAction("Buy groceries"));
  store.dispatch(AddTodoAction("Walk the dog"));
  store.dispatch(RemoveTodoAction("Buy groceries"));
  
  print(store.state); // ["Walk the dog"]
}

위의 예시 코드에서는 AddTodoActionRemoveTodoAction이라는 두 개의 액션을 정의하고, todoReducer라는 리듀서 함수를 생성합니다. 이 리듀서 함수는 액션에 따라 상태를 변경하고, 스토어를 통해 앱의 상태를 관리합니다. store 객체를 생성한 후, dispatch 메서드를 사용하여 액션을 디스패치하여 상태를 변경할 수 있습니다.

이렇게 Redux를 사용하면 앱의 상태를 관리하고 효율적으로 업데이트할 수 있으며, 복잡한 앱의 상태 관리를 간편하게 할 수 있습니다.

참고 자료: