Quản lý state: nhận định boolean tốt và không tốt

Bài viết được sự cho phép của tác giả Lưu Bình An

Tóm tắt nếu bạn lười đọc:

Một ví dụ dễ thấy nhất với boolean không tốt là cách thiết kế state như vầy

let isLoading = true;
let isComplete = false;
let hasError = false;

Thoạt nhìn chúng ta sẽ nghĩ nó tốt. Chúng ta đưa ra 3 state khác nhau ứng với 3 giá trị boolean riêng biệt, chỉ duy nhất một giá trị là true

const makeFetch = async () => {
  isLoading = true;
  try {
    await fetch('/users');

    isComplete = true;
  } catch (e) {
    hasErrored = true;
  }
  isLoading = false;
};

Nhưng khi nghĩ kỹ lại, chúng ta sẽ nhận được 2 giá trị true nếu makeFetch được gọi lại lần nữa

isLoading = true;
isComplete = true;
hasError = false;

Vậy làm sao để thiết kế một boolean tốt cho trường hợp trên?

State ở đây chúng ta sẽ có tất cả các giá trị sau

const statusEnum = {
	idle: 'idle',
	loading: 'loading',
	complete: 'complete',
	error: 'error'
}

Và chúng ta dùng nó trong hàm makeFetch

const makeFetch = async () => {
  status = statusEnum.loading;
  try {
    await fetch('/users');

    status = statusEnum.complete;
  } catch (e) {
    status = statusEnum.error;
  }
};

const isLoading = (status) => status === statusEnum.loading;