Stage management là gì?
State management chỉ việc quản lý trạng thái của một hay nhiều User Interface control (ví dụ như text field, button,…).
Thông thường trong các ứng dụng thì trạng thái của một UI control phụ thuộc vào các UI control khác, chẳng hạn một button chỉ được enabled khi các input field có giá trị valid. Khi ứng dụng tăng trưởng về kích thước, điều này làm việc quản lý user interface trở nên phức tạp.
Một ví dụ rõ ràng hơn đó là khi user login vào thì sẽ nhận được ‘welcome’ message, nhưng với các truy cập trang tiếp theo thì sẽ không có message này. Vậy làm sao quản lý trạng thái user login? Bạn có thể quản lý state ở mỗi trang, nhưng điều này sẽ dẫn đến việc trùng lặp code rất nhiều. Thay vào đó bạn có thể dùng state management pattern đối với việc quản lý message và sẽ nhận được message khi message có sẵn.
Ví dụ về thư viện dùng cho state management có thể kể đến như:
- Vuex cho Vue.js
- Redux cho React (tuy nhiên Redux cũng có thể dùng cho các framework/library khác)
- NgRx cho Angular
Lợi ích của State management
- State của toàn bộ ứng dụng được quản lý tập trung, do vậy không cần phải truy cập một state hoặc data từ nhiều nơi.
- Giảm số lượng HTTP request gửi đến backend để lấy data.
- Chỉ gửi request đến backend khi có sự thay đổi về data
- Tăng code quality, giảm code size, dẫn đến dễ maintain hơn.
Lúc nào thì nên áp dụng state management?
Tuy có nhiều lợi ích như đã nói ở trên, việc áp dụng state management lại khá phức tạp và tốn thời gian, vì vậy hãy chắc là bạn muốn áp dụng nó.
- Khi ứng dụng của bạn có rất nhiều component và có nhiều request gửi đến backend để lấy data.
- Khi bạn sử dụng data lặp lại trong toàn bộ ứng dụng, chẳng hạn danh sách khách hàng được dùng cho cả in hoá đơn và báo cáo doanh thu để tránh việc request danh sách này từ backend nhiều lần.
Với các trường hợp khác, bạn có thể quản lý state đơn giản với các service thay vì bỏ công sức implement state management một cách không cần thiết.
Áp dụng state management như thế nào?
Có nhiều cách để áp dụng state-management, dưới đây là một số implement đối với các framework phổ biến.
Angular – ngrx
- https://www.concretepage.com/ngrx/ngrx-store-example
- https://www.techiediaries.com/angular-10-ngrx-store-example/
- https://duncanhunter.gitbook.io/angular-and-ngrx/add-simple-ngrx-spinner
React – Redux
- https://www.techomoro.com/how-to-build-a-simple-counter-app-using-react-and-redux/
- https://www.tutorialspoint.com/redux/redux_react_example.htm
Vue – Vuex
Đam mê Code 