Skip to main content

One post tagged with "Bloc"

View All Tags

· 3 min read
Park Ki Hyun

일단 vs code 확장은 bloc, dart data class generator, dart-import, pubspec assist

dart data class generator가 있으면 코드 자동 생성을 편하게 해준다. (copyWith, constructor 등.. )

pubspec assist가 있으면 패키지를 쉽게 넣을 수 있음

Bloc에 대해서​

영상을 보며 따라하면서 저번주에 KOSTA에서 배운 Bloc 사용법에 대해 익히고 있었다.

영상은 다른 방식이라 헷갈렸는데 VS Code의 Bloc extension을 사용하여 New Bloc을 해가지구 Bloc을 만들었다.

3개의 파일이 나온다. bloc,event,state

state​

class TasksState extends Equatable {
  const TasksState({
    this.allTasks = const <Task>[],
  });

  final List<Task> allTasks;

  @override
  List<Object> get props => [allTasks];
}

현재 state에는 List<Task> 타입의 allTasks라는 상태가 하나 있다.

여러 개 추가하면 여러 개 되는듯?

event​

sealed class TasksEvent extends Equatable {
  const TasksEvent();

  @override
  List<Object> get props => [];
}

class AddTask extends TasksEvent {
  final Task task;
  const AddTask({
    required this.task,
  });

  @override
  List<Object> get props => [task];
}

class UpdateTask extends TasksEvent {
  final Task task;
  const UpdateTask({
    required this.task,
  });

  @override
  List<Object> get props => [task];
}

class DeleteTask extends TasksEvent {
  final Task task;
  const DeleteTask({
    required this.task,
  });

  @override
  List<Object> get props => [task];
}

이렇게 서비스들 만들 수 있다. 현재 전부 구현된건 아닌.. 거같은데 일단 이따 수정

bloc​

하다가 깨달았다.

class TasksBloc extends Bloc<TasksEvent, TasksState> {
  TasksBloc() : super(const TasksState()) {
    on<AddTask>(_onAddTask);
  }

  void _onAddTask(AddTask event, emit) {
    emit(TasksState(
      allTasks: [...state.allTasks, event.task],
    ));
  }
}

Bloc을 extends 할 때 Bloc<event, state>로 하라고 배웠다. 근데 할 때 state를 int나 bool같은 타입으로만 지정해줘서 그냥 state로 사용하면 됐었는데 class로 state 타입 지정해주니 state.allTasks로 해야 하더라..

깨달음​

bloc에서 큰 실수가 있었다. 위코드 처럼 작성하면 되는데 코드 수를 줄여보겠다고

  void _onAddTask(AddTask event, emit) {
    emit(
      [...state.allTasks, event.task],
    );
  }

위처럼 작성했다가 작동을 안해서 살짝 어지러웠다.

Bloc이 Bloc<TasksEvent,TasksState>이니 TasksState type에 맞춰줘야 하나보다.