State management gọn gàng

Tại sao cần đọc bài này?

• Nâng cao trình độ làm state management

• Code state một cách lean hơn

• Có một cách khác khi tiếp cận bài toán trên frontend

UI = f(state)

State - the particular condition that someone or something is in at a specific time. Cambridge

• Mapping qua UI dễ hơn 😮‍💨

• Ít code hơn ⇒ ít bug hơn 🐹

• Ít code hơn ⇒ dễ chỉnh sửa hơn 😌

Khi nào state change?

• Event từ user interactive với App

• Event từ 3rd party (Trong đây mình định nghĩa là tất cả mọi thứ bắn event vào app mà không tới từ user là 3rd party, nó có thể là response từ backend, event từ websocket, hoặc là... cúp điện, rớt mạng)

1. Event tới (User hoặc 3rd party)

2. Call đoạn code xử lý logic với event đó

3. Lưu lại data đã xử lý vào state

4. UI render theo state mới

1. User click vào button filter để filter task đã Done

2. Nhận event filter task = "Done", filter các tast có status = "Done"

3. Lưu danh sách đã filter vào state

4. Render ra UI list task đã filter

Vấn đề là gì khi làm ETL ở frontend?

Khi có nhiều event kết hợp để cùng tạo ra một output UI.

{
	"source": [], // List todo raw
	"status": "Done" | "Undone",
	"keyword": "",
	"result": []
}

1. Khi user input search keyword chỉ cần

2. Lấy source data, filter theo status, sau đó filter lại theo keyword

3. Sau đó lưu lại vào state

1. Chạy lại hàm transform ở flow 1 . Nhược điểm là hàm transform này phải chạy lại 2 lần

2. Lấy kết quả ở State 1 để tính tiếp. Nhược điểm là app của bạn sẽ phải render lại 2 lần, lần đầu render theo flow đầu, sau đó có kết quả từ state 1 rồi mới run tiếp flow 2 dẫn tới render lần thứ 2 mới có được kết quả mong muốn

🚫

Đừng cố gắn Filter by Priority luôn vào flow 1 và đẻ luôn ra hai thằng state 1 và state 2 vì làm như vậy sẽ càng khiến cái app của bạn rối hơn 🙃 vì:

• Code không tường mình để thể hiện tốt được flow của app

Flow expect sẽ được miêu tả: Lấy output của flow 1, filter theo priority để có flow 2 trong khi nếu nhìn vào code bạn gom cả việc xử lý chi tiết của flow 1 và xử lý chi tiết của flow 2 vào chung một function. Please don't

Một flow tốt là flow thể hiện rõ: - Input cần thiết là gì - Output mong muốn là gì - Khi nào thì flow này được chạy

Vấn đề một cách tổng quát hơn

Một cách tốt hơn với ELT (Extract - Load - Transform)

const TodoList = () => {
  // Extract
  const [todos, setTodos] = useState([]); // Loaded from backend
  const [status, setStatus] = useState('Done');
  const [keyword, setKeyWord] = useState('');
  const [priority, setPriority] = useState('Important');
  
  // Transform flow 1
  const filteredTodos = useMemo(() => {
    return todos.filter(item => {
      if (status) {
         return item.status === status
      }
      return true;
    }).filter(item => {
      if (keyword) {
         return item.name.includes(item)
      }
      return true;
    });
  }, [todos, state, keyword]);
  
  // Transform flow 2
  const fitlertedTodosWithPriority = useMemo(() => {
    return filteredTodos.filter((item) => {
      if (priority) {
         return item.priority === priority
      }
      return true;
    });
  }, [priority, filteredTodos]):

  return // Render your list here
}

• Flow 1, khi user có event filter by status hoặc filter by keyword, lưu lại event data status hay keyword vào state. Sau đó có một hàm transform với input là
• Source data
• Status
• Keyword

• Flow 2, khi user có event filter by priority. Sẽ có một hàm transform tương ứng với input là
• Priority
• Output của hàm transform ở flow 1

FAQ

Có scale được trong một application lớn không?

Có, scale mạnh là đằng khác! Các bác cứ hình dung source data là duy nhất - source of trust, component nào consume data sẽ có cách nhìn data đó theo một cách khác nhau.

Vd: Todo list là source of trust lấy từ backend lưu vô. Component Todo sẽ filter từ source of trust đó những task Undone. Component history sẽ filter từ source of trust đó những task trong quá khứ.

Vì vậy mỗi component sẽ có cách view data một cách khác nhau, và góc nhìn đó sẽ cùng với vòng đời của component, tạo ra khi component được tạo và xóa đi khi component bị destroy

Tổng kết