👋 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