React State Management Libraries: Không chỉ có Redux 👌 (Tập 2)

Trong tập trước của bài giới thiệu về các thư viện quản lý trạng thái trong React, chúng ta đã đi qua với 4 thư viện tuy nhỏ nhưng không dỏm là Akita, Jotai, Zustand và Unstated. Các bạn có thể tìm hiểu qua các thư viện ấy qua bài viết trước

React State Management Libraries: Không chỉ có Redux 👌 (Tập 1)

...Mình sẽ giới thiệu tới các bạn một số điểm thú vị của các thư viện trong việc quản lý trạng thái (state management) trong React ngoài Redux ra nhé!

Góc Của Chung 🚀Góc Của Chung

Trong bài viết này, chúng ta sẽ tiếp tục tìm hiểu thêm về những thư viện thú vị khác trong hệ sinh thái React nói riêng và Javascript nói chung nhé. Các thư viện trong bài viết này sẽ nằm ở phân khúc phổ biến hơn với lượng sao dao động từ 500 - 2000 ⭐ nhé.

Kea (> 1.7k ⭐)

Github: https://github.com/keajs/kea

Kea là thư viện quản lý trạng thái hỗ trợ TypeScript và đảm bảo ổn định cho giai đoạn hậu phát triển (post-development). Vì Kea được xây dựng dựa trên Redux cùng với một vài cải tiến, các nhà phát triển React, đã có kinh nghiệm với Redux, sẽ dễ dàng tiếp cận với Kea hơn.

Kea cũng mang cho mình một vài đặc điểm nổi trội như

• Nền tảng vững chắc: Kea có cả một hệ sinh thái hoàn chỉnh được xây dựng dựa trên React. Kea cũng được nhận định là tốt hơn các đối thủ cạnh tranh khác, tuy nhiên do chưa sử dụng qua nên mình cũng không thể khẳng định điều này.
• Tính mở rộng: Kea được phát triển để dành cho các nhóm phát triển nặng suất và các dự án tiềm năng, yêu cầu một khả năng mở rộng tốt.
• Thân thiện với nhà phát triển: Nếu bạn nhìn qua cách triển khai và sử dụng Kea thì bạn sẽ phải nhận định sử đơn giản trong cú pháp và cách kiến trúc của Kea.

Mặc dù được xây dựng dựa trên Redux và kế thừa một số thành phần cơ bản của Redux như Global State, theo mình đánh giá thì việc thiết lập Kea sẽ tiết kiệm được nhiều thời gian hơn.  Các thành phần logic chính của Kea bao gồm:

• Action: Các logic điều hành hệ thống state sẽ được chứa trong Action
• Reducer: Đóng vai trò lưu trữ trạng thái và lắng nghe mệnh lệnh cập nhật từ Action. Các trạng thái này được lưu trữ trong Global State giống với Redux.
• Selector: Đóng vai trò là một getter để lấy ra các giá trị từ Store.

Dob (> 700 ⭐)

Github: https://github.com/dobjs/dob

Dob là một thư viện quản lý trạng thái không quá là phổ biến nhưng cũng rất dể tiếp cận. Không chỉ được sử dụng riêng cho React mà bạn cũng có thể sử dụng Dob với cả Javascript thuần.

Theo như mình đánh giá thì thư viện quản lý trạng thái này có nhiều điểm chung với các thư viện trong phần trước như Aktia và Unstated. Sỡ dĩ mình nhận định rằng Dob có nhiều điểm chung là bởi vì Dob cũng gồm các yếu tố cấu tạo nên hệ thống quản lý trạng thái theo khái niệm "streaming data" và Observable Data Store. Cụ thể hơn thì các thành phần ấy là:

• Store: Giống với Akita, Store trong Dob được sử dụng nhằm mục đích lưu trữ các trạng thái được khai báo ban đầu và được giám sát nhằm có sự thay đổi được thực hiện với Action.

@observable
export class UserStore {
  name = "bob";
}

• Action: Nếu Akita có Query hay Unstated có Container đóng vai trò là thành phần chứa logic và các phương thức thay đổi trang thái, thì với Dob, Action sẽ giữ vai trò đó.

export class UserAction {
  @inject(UserStore) userStore: UserStore;

  @Action
  setName() {
    this.userStore.name = "lucy";
  }
}

• Provider: Với Dob, các React Component được bọc bởi Provider sẽ nhận được các trạng thái được khai báo trong Store và quyền cập nhật trạng thái lên từ Action được truyền vào Provider.

ReactDOM.render(
  <Provider
    {...combineStores({
      UserStore,
      UserAction
    })}
  >
    <App />
  </Provider>,
  document.getElementById("react-dom")
);

ReactN (> 1.9k ⭐)

Github: https://github.com/CharlesStover/reactn

Thư viện tiếp theo được giới thiệu trong bài này là ReactN. ReactN được xây dựng dựa trên chính thư viện của React cũng thêm một số phần mở rộng để phù hợp cho việc quản lý trạng thái của ứng dụng. Thay vì bình thường khi làm việc với React thì chúng ta sẽ có

import React from "react";

Tuy nhiên, khi sử dụng ReactN thì thay vì các logic của React được lấy từ "react" thì sẽ lấy từ "reactn".

import React from "reactn";

Về phần mở rộng mà ReactN cung cấp, giờ đây chúng ta có thêm một vài hook mới (nếu nhà phát triển sử dụng React Hooks)  như là useGobal(). Hook này khá giống với useState() khi mà nó có 2 phần chính là biến global và phương thức setGlobal().

import {useGlobal} from "reactn";

const [global, setGlobal] = useGlobal();

Và một số hook khác như useDispatch, useGlobal, withInit...

Có thể nói thì đưa ReactN vào sử dụng trong các dự án vừa và nhỏ có thể là một lựa chọn sáng suốt vì lượng tài nguyên không yêu cầu quá cao, tốn ít chi phí vì đóng vai trò là một phần mở rộng của thư viện React. Tuy nhiên, mình nghĩ đễ đưa ReactN vào các dự án yêu cầu sự duy trì lâu dài thì cần sự xem xét.

Và đó là các thư viện quản lý trạng thái mà mình cảm thấy khá là thú vị, mỗi thư viện đều mang các nét đặc trưng riêng biệt nhưng cũng có các điểm giống nhau theo kiến trúc Event Driven. Sau khi nghiên cứu và viết 2 bài blog này thì mình đánh giá Jotai và Zustand sẽ là hai thư viện mình bắt đầu sử dụng trong các dự án tiếp theo.

Ngoài ra còn các thư viện khác vốn dĩ đã rất phổ biến với cộng đồng React như MobX, Recoil hay Redux Toolkit nên mình sẽ không nêu ra trong 2 tập của blog này. Cảm ơn các bạn đã đón đọc ❤❤❤