Trong bài viết này mình sẽ đưa ra cho các bạn 5 thư viện quản lý State cho React, thứ tự mình đặt trong bài viết không hề mang tính chất xếp hạng nhé. Một số thư viện có thể rất quen tên với bạn, một số khác thì có thể sẽ khiến bạn bất ngờ. Bài viết của mình sẽ chỉ đưa ra một số mô tả ngắn gọn, hi vọng sẽ thu hút được sự quan tâm của các bạn để đi vào link docs gắn kèm.

Hãy bắt đầu thôi nào!

1. Redux

Redux chắc hẳn đã hiện lên trong tâm trí bạn ngay khi bạn đọc tiêu đề của bài viết này (tất nhiên là nếu như bạn đã từng làm quen với React ). Redux có thể coi là thư viện quản lý State đứng đầu từ khá lâu rồi. Điều này một phần là do Redux thường đựoc bundled cùng với React luôn tuy nhiên nó hoàn toàn độc lập với React và có thể sử dụng với bất kỳ thư viện UI hay framework nào khác.

Vì vậy, có thể coi Redux là “mặc định” khi nhắc đến thư viện quản lý State. Tuy nhiên nó đã bắt đầu bộc lộ một số “dấu hiệu của tuổi tác” và nếu không phải vậy thì đôi khi nó sẽ khiến cho một số không nhỏ các lập trình viên khó chịu. Đừng hiểu lầm ý của mình, Redux vẫn là một thư viện tuyệt vời, nhưng kích thước của nó, learning curve một cách dốc đứng và cách tiếp cận dài dòng với action-reducer để quản lý State có thể khiến một số người muốn thay đổi.

Tuy nhiên, Redux vẫn là thư viện phổ biến nhất trong lĩnh vực này, nó có một cộng đồng khổng lồ và một hệ sinh thái rộng lớn không kém, vì vậy Redux vẫn sẽ nằm ở top trong một khoảng thời gian kha khá nữa.

2. Mobx

Lại là một cái tên quen thuộc đúng không, kém phổ biến hơn Redux một chút xíu, Mobx vẫn có cho mình lượng “fan” đông đảo. Tương tự như Redux, Mobx không chỉ hỗ trợ cho một mình React (dù React vẫn là đối tượng chính).

Hiện tại, Mobx chắc chắn không phải là một thư viện nhỏ nhưng so sánh với Redux, một số người có thể thấy API và cách tiếp cận của nó có đôi phần dễ chịu hơn. Nó vẫn có một learning curve đánh chú ý đối với kiểu thư viện này nhưng sau tất cả, cảm nhận với Mobx thực sự tốt hơn đoi chút và ít lặp lại hơn so với Redux.

Điều này có lẽ chỉ là nhận định cá nhân của mình, nhưng để các bạn có thêm nhiều hướng nhìn, Mobx chắc chắn không dành cho những ai theo chủ nghĩa tối giản. API của nó rất tốt và có thể dẫn tới những đoạn code thực sự đẹp và sạch sẽ. Nhưng ẩn sâu trong nó là một thư viện nặng nề, tương đối khó để thành thạo đầy đủ. Và trên hết, cộng đồng và hệ sinh thái của Mobx cũng không thực sự lớn.

3. Recoil

Ok, từ giờ chúng ta sẽ bước đến những thư viện ít nổi tiếng hơn chút hoặc là hoàn toàn xa lạ, tuy nhiên nó chắc chắn sẽ chứa những điều thú vị bất ngờ.

Bạn có thể thấy quen thuộc với Recoil. Nó đã gây được sự chú ý nhất định khi “ra mắt” trong một giai đoạn không ổn định đầu năm 2020 và đang đứng đầu trong danh sách các repo “Facebook experiment” với số start vượt trội.

Dù hiện tại nó vẫn đang là dự án thử nghiệm nhưng nó đnag được phát triển bởi những lập trình viên của Facebook (nơi khai sinh ra React), điều này chắc chắn sẽ giúp tăng độ phổ biến của Recoil. Thậm chí có một số người đã sử dụng nó trong những sản phẩm production ngay trong thời điểm hiện tại.

Nhưng điều đó không có nghĩa là Recoil có có điểm gì nổi bật. Thực ra là hoàn toàn ngược lại, Recoil cung cấp cách tiếp cận atom-based để quản lý State rất mới mẻ, hiện đại và hook-centric API là một điểm khá hấp dẫn nữa.

Tuy nhiên, thời điểm hiện tại, do Recoil vẫn đang trong giai đoạn thử nghiệm nên có lẽ bạn không nên sử dụng nó trong các dự án production. Hãy đặt nó qua một bên, sử dụng trong những dự án thử nghiệm và tiếp tục theo dõi sự phát triển của Recoil (thậm chí là đóng góp vào sự phát triển của nó) để xem nó sẽ trở nên như thế nào.

4. Akita

Thư viện tiếp theo, Akita có vẻ ít được biết tới. Nó tương tự như Mobx, nhưng nó có thiên hướng về Object-Oriented (OO) API hơn là functional như Mobx.

Vì vậy, Akita tạo ra sự khác biệt thông qua cách tiếp cận bằng OO của nó. Đặc biệt dễ nhận thấy khi sử dụng nhiều TypeScript và Decorator. Hiện tại, khi TypeScript không còn dành riêng cho OOP nữa và được hỗ trợ rất nhiều (tất cả các thư viện tỏng bài viết này đều hỗ trợ TS). Ngaòi Akita, Mobx là thư viện duy nhất trong danh sách này hỗ trợ cả TypeScript và Decorator, tuy nhiên nó đã chuyển trọng tâm sang các cách tiếp cận khác kể từ v6.

Vì vậy, với cơn sốt về lập trình chức năng (Functional Programming – FP) và hook đang diễn ra ngay lúc này và Decorator – thực tế là một tính năng JS chưa thực sự ổn định, Akita có thể sẽ không phải là sự lựa chọn của số đông. Có thể đó là lý do tại sao Akita lại tập trung về Angular (nơi mà Decorator phổ biến hơn) hơn là React.

Nhưng sau tất cả, nếu bạn thích Akita và API của nó thì không có gì có thể năng cản bạn sử dụng nó với React. Nó có thể ghép nối rất tốt nếu bạn sử dụng components class-based, có bộ tài liệu tuyệt vời và cộng đồng với quy mô vừa đủ.

5. Hookstate

Mình đã giữ lại cái “tốt nhất” để nói cuối cùng.

Hookstate đang là sự lựa chọn yêu thích của mình khi làm việc với React, mặc dù nó ít phổ biến nhất trong danh sách này. Nó nhỏ, tối giản, sạch sẽ, có khả năng mở rộng cao và nó sử dụng hook-based API.

Đây có thể là sự lựa chọn cho bạn nếu như bạn là người đam mê React hooks. Hookstate sử dụng chúng và một số kỹ thuật ấn tượng khác để mang lại trải nghiệm và hiệu suất tuyệt vời.

Không chỉ có thể sử dụng cho Global State mà còn có thể dụng thêm “useState()” cùng một số tính năng bổ sung nữa. Xử lý State lông nhau mà không làm ảnh hưởng hiệu suất và xử lý dữ liệu không đồng bộ một cách dễ dàng.

Tất cả điều đó cùng với kích thước nhỏ và cấu trúc plugin đơn giản dễ sử dụng sẽ mang đến nhiều tính năng hơn nữa.

Mình thực sự khuyến nghị bạn nên xem qua nó ít nhất một lần.

6. Đừng bỏ quên những điều cơ bản

Tại thời điểm này, khi chúng ta đã đi qua hết những thư viện tuyệt vời này, mình muốn nhắc các bạn một sự thật là bạn không nhất thiết phải dùng đến chúng.

Trái ngược với suy nghĩ của nhiều người, thư viện dùng để quản lý State không phải là một yêu cầu bắt buộc khi sử dụng React. Trong thực tế, React cũng cung cấp các công cụ riêng cho việc đó – State và Context APIs. Chắc chắn rằng nó sẽ không thuận tiênj để làm việc như khi sử dụng các thư viện trên nhưng hoàn toàn có thể sử dụng nó cho các dự án không quá phức tạp.

Do đó, hãy chỉ lựa chọn thư viện ngoài khi bạn chắc chắn rằng mình sẽ cần tới nó. Đó là một phần lý do mà mình yêu thích Hookstate vì nó cung cấp nhiều tính năng bổ sung với một API dễ chịu trong khi kích thước không hề lớn.

7 Tổng kết

Những đánh giá, nhận đinh của mình về các thư viện trên hầu hết đều mang tính chất cá nhân, nếu có góp ý hay các bạn còn biết thư viện nào tuyệt vời hơn nữa, hãy để lại comment cho mình biết nhé.

Source