React Client And Server State

Quay lại vài năm trước. Hỏi bất kỳ React developer về việc quản lý state như thế nào, câu trả lời gọn lỏn trong một dòng: trong useState ở chỗ này, lift lên parent ở chỗ kia, và cho thứ gì lớn hơn thì có store. Redux, MobX, hay bất kì 1 thư viên nào khác, dùng cái nào cũng cùng một việc: giữ những tất cả những thứ mà UI cần 1 nơi và để component subscribe vào.

Hồi đó mình là fan cứng của Redux. Học nó những ngày đầu làm React thật sự khá khó khăn: flow dispatch-action-reducer, immutability rules, HOC boilerplate. Nhưng khi bắt đầu hiểu rõ hơn, cảm thấy nó rất magic. Mở DevTools, time-travel qua state, replay mọi action đã từng fire. Nếu store giữ tất cả, DevTools thấy tất cả. Cái cảm giác mình có thể control được mọi thứ trong app qua một tool duy nhất là thứ mình chưa từng trải nghiệm trước đó.

Ở đỉnh hype của Redux, pattern đó bị đẩy đến tận cùng. redux-form giữ form state. Thunks dump API response thẳng vào slice nằm ngay cạnh đó. Theme, modal, auth session, cached list từ server, tất cả đều có reducer riêng. Store trở thành app, và bất kể một mảnh state đến từ remote API hay từ một click local, mọi thứ đều được đặt dưới cùng một từ: state.

Rồi API work bắt đầu chồng chất. Mỗi endpoint mới đồng nghĩa với cùng một routine: action type, action creator, các case FETCH_REQUEST / SUCCESS / FAILURE, một selector, một thunk hoặc saga. Mỗi cái tạo ra cùng một bộ ba loading / error / data mà cả tá cái khác đã có. Xài redux-saga để xử lý async chỉ thêm việc: generators, takeLatest, put, call, cancellation patterns. Cả một ngôn ngữ thứ hai, và hai endpoint mới vẫn đồng nghĩa với hai saga mới cùng các slice giống y hệt cái mình viết sprint trước.

Handle caching là một trong những phần nhức đầu nhất. Hai component mount cùng lúc, cả hai dispatch cùng một fetch. Mutate một item ở một màn hình, và một reducer case thứ ba là thứ giữ màn hình kia đồng bộ. Mỗi cái là một vấn đề mình tự làm bằng tay, phức tạp, khó maintain và rất dễ sai sót.

Và vì remote data và local flag share chung một store, chúng rất dễ ảnh hưởng đến nhau. Một keystroke trong redux-form có thể re-render một list backed by API data ở khắp app. Nếu không có reselect và memoization ở mọi nơi, app chắc chắn sẽ bị giật lag.

Đến một lúc mình bắt đầu tự hỏi app sẽ trông thế nào nếu toàn bộ những thứ phức tạp phía server kia được đặt ở một chỗ hoàn toàn khác. Tưởng tượng một layer riêng sở hữu cache, dedupe, background refetch, behavior stale-then-fresh, và invalidation. Với phần đó được handle, cái còn lại trong store trở nên đơn giản hơn rất nhiều: theme, modal flag, sidebar toggle. Local, synchronous, và được scope lại rất nhỏ.

Đến một lúc community cũng tách bạch hai loại state này ra, và phần còn lại của chương xoay quanh cả hai. Phần tiếp theo sẽ đặt tên cho từng nửa, và mình muốn bắt đầu với phía vừa kể, phía sẽ handle toàn bộ những phần khó khăn và phức tạp hơn: server state.