Hướng Dẫn Quản Lý Global State Đơn Giản Với React Signify

👋 Lời Mở

Chào bạn, việc quản lý trạng thái toàn cục (Global State) trong ReactJS luôn là một chủ đề nóng bỏng, đặc biệt là đối với những người mới bắt đầu. Nhiều người cảm thấy khó khăn trong việc cấu hình và thiết lập môi trường. Nếu bạn đang gặp phải vấn đề này, bài viết dưới đây sẽ hữu ích cho bạn.

Trong bài viết này, chúng ta sẽ khám phá thư viện React Signify, một công cụ giúp quản lý Global State một cách dễ dàng và nhanh chóng. Rất phù hợp cho việc thực hiện các dự án cá nhân của bạn.

Chuẩn Bị Môi Trường ReactJS

Cài Đặt Ứng Dụng ReactJS

Để bắt đầu, bạn cần tạo một ứng dụng React mới. Chạy các lệnh sau:

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

Cài Đặt React Signify

Chúng ta sẽ cần thư viện React Signify để quản lý Global State. Chạy lệnh sau:

npm i react-signify

Khởi Tạo Global State Trong 3 Bước

Bước 1: Khai Báo Global State

Việc khai báo rất đơn giản, chỉ cần một dòng mã như sau:

export const sCount = signify(0);

Bước 2: Sử Dụng Giá Trị

Để sử dụng giá trị của Global State, bạn có thể dùng hook use:

const count = sCount.use();

Bước 3: Thay Đổi Giá Trị

Đầu tiên, tạo một hàm để xử lý việc tăng giá trị lên +1:

const handleUp = () => {
  sCount.set((p) => (p.value += 1));
};

Tiếp theo, áp dụng hàm này lên nút bấm trong giao diện:

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

Tổng Quan Code

Dưới đây là mã hoàn chỉnh khi áp dụng các bước trên vào component App.jsx:

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

export const sCount = signify(0);

export default function App() {
  const count = sCount.use();

  const handleUp = () => {
    sCount.set((p) => (p.value += 1));
  };
  
  return (
    <div>
      App {count}
      <button onClick={handleUp}>UP</button>
    </div>
  );
}

Bạn thấy đó, chỉ với 3 bước đơn giản, bạn đã tạo ra Global State cho ứng dụng của mình.

Sử Dụng Global State Ở Mọi Nơi

Sau khi thực hiện các bước trên, bạn có thể sử dụng sCount tại bất kỳ component nào. Hãy tham khảo hướng dẫn dưới đây:

Bước 1: Import Global State

Nhập sCount từ component App.jsx:

import { sCount } from "./App";

Bước 2: Sử Dụng

Tiếp tục, sử dụng hook use như trước:

const count = sCount.use();

Tổng Quan

Dưới đây là mã sau khi thiết lập tại component info.jsx:

import { sCount } from "./App";

export default function Info() {
  const count = sCount.use();

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

Chúc mừng bạn! Bạn đã thành công trong việc sử dụng Global State ở mọi component mà bạn muốn.

Tổng Kết

Chỉ với 5 bước đơn giản, bạn đã có thể kiểm soát Global State một cách dễ dàng. Nếu bạn có thắc mắc hay cần hỗ trợ thêm về các kỹ thuật đã trình bày, hãy để lại bình luận bên dưới nhé.

Thông Tin Liên Quan

• Thư viện React: https://react.dev
• React Signify: https://reactsignify.dev/?lang=vi

Tìm Hiểu Thêm

• Cấu Trúc Dự Án ReactJS Chuyên Nghiệp: [Link]
  source: viblo