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:

boolean không tốt đại diện cho state, boolean tốt là kết quả tính từ state

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;