[React][React Signify] Quản lý Global State siêu đơn giản

👋 Lời mở

Xin chào mọi người, việc quản lý Global State luôn là chủ đề nóng khi làm việc với ReactJS, việc cấu hình và thiết lập môi trường có vẻ quá khó khăn cho người mới bắt đầu. Nếu bạn đang gặp vấn đề trên, thì bài viết này sẽ rất phù hợp với bạn.

Bài viết này sẽ giúp bạn biết thêm về thư viện React Signify, thư viện giúp ta quản lý Global State cực kỳ dễ dàng, rất phù hợp để bạn có thể thực thi nhanh chóng project cá nhân của mình.

Chuẩn bị môi trường ReactJS

Cài đặt ứng dụng ReactJS

npx create-react-app my-app
cd my-app

Cài đặt React Signify - công cụ quản lý Global State

npm i react-signify

Khởi tạo Global State trong 3 bước

Bước 1 : Khai báo global state

Cách khai báo rất đơn giản với 1 dòng code như sau

export const sCount = signify(0);

Bước 2 : Sử dụng giá trị

Cách sử dụng khá đơn giản bằng cách sử dụng hook use

const count = sCount.use();

Bước 3 : Thay đổi giá trị

Đầu tiên ta tạo 1 function đại diện xử lý thay đổi +1 giá trị

// Tạo function xử lý
const handleUp = () => {
  sCount.set((p) => (p.value += 1));
};

Tiếp theo, ứng dụng function này lên button của màn hình

<button onClick={handleUp}>UP</button>

Tổng quan code

Đây là kết quả khi áp dụng tất cả code trên vào component App.jsx

// App.jsx
import { signify } from "react-signify";

export const sCount = signify(0); // 1. Khởi tạo Global State

export default function App() {
  const count = sCount.use(); // 2. Sử dụng Global State

  const handleUp = () => {
    sCount.set((p) => (p.value += 1)); // 3. Thay đổi giá trị Global State
  };
  
  return (
    <div>
      App {count}
      <button onClick={handleUp}>UP</button>
    </div>
  );
}

Tuyệt vời phải không 🤩, chỉ với 3 bước đơn giản, bạn đã thành công khi tạo ra Global State cho ứng dụng của mình rồi.

Sử dụng ở mọi nơi

Sau khi khởi tạo ở bước 2, nếu cần sử dụng sCount tại component khác, hãy tham khảo qua 2 bước sau

Bước 1 : import global state

import { sCount } from "./App";

Bước 2 : sử dụng

Ta vẫn dùng function use và sử dụng như bình thường

const count = sCount.use();

Tổng quan

Code sau khi thiết lập tại component info.jsx sẽ như sau

import { sCount } from "./App"; // 1. Tham chiếu sCount từ component App.jsx

export default function Info() {
  const count = sCount.use(); // 2. Sử dụng giá trị của sCount

  return <div>Info {count}</div>;
}

Good work! Vậy là bạn đã thành công trong việc sử dụng Global State tại mọi Component mà bạn muốn rồi đấy 👍

Tổng kết

Với 5 bước, bạn đã có thể kiểm soát Global State rất đơn giản và dễ dàng phải không nào 😆 Nếu các bạn có thắc mắc hay cần support thêm về các kỹ thuật trên, hãy để lại comment bên dưới nhé.

Thông tin liên quan

• Thư viện React : https://react.dev
• React Signify (Quản lý Global State) : https://reactsignify.dev/?lang=vi

Tìm hiểu thêm

• Cấu trúc dự án ReactJS chuyên nghiệp : Link