Cách đơn giản nhất để tạo Trạng thái toàn cầu được chia sẻ trong React bằng mô hình nguyên tử đơn giản. Trong blog này, bạn sẽ tìm thấy cách sử dụng và triển khai chi tiết của thư viện.

Cách sử dụng

Tạo trạng thái toàn cầu của bạn

import { gState } from 'usegstate'

const myGlobalState = gState('hello-world!')

import useGState from 'usegstate'

const YourAwesomeApp = () => {
  const [gState,setGState] = useGState(myGlobalState)
  return (
    <div>{gState}</div>
  )
}

import {GStateProvider} from 'usegstate'

const Wrapper = () => {
  return (
    <GStateProvider>
      <YourAwesomeApp />
    </GStateProvider>
  )
}

Tại sao không phản ứng API bối cảnh?

Như chúng ta đã biết, React Context sẽ kết xuất lại từng thành phần con bất cứ khi nào trạng thái được chia sẻ thay đổi trong bất kỳ thành phần con nào, do đó gây ra các vấn đề về hiệu suất và kết xuất bổ sung trong một số trường hợp.

Động lực

Tôi luôn tò mò về cách thức hoạt động của các thư viện trạng thái trung tâm bên ngoài như redux , jotai , v.v. Có vẻ như họ đang sử dụng một loại siêu năng lực nào đó cho phép họ tạo ra các cửa hàng trung tâm bên ngoài này, hoàn toàn cách ly với luồng một chiều của phản ứng.

Và sau khi xem qua các mã nguồn khổng lồ của họ, tôi đã tìm thấy chìa khóa. Một điều thực sự mở rộng bề rộng kiến ​​​​thức về phản ứng của tôi.

Ý tưởng chính của useGState - Cách thức hoạt động.

Các hàm thiết lập trạng thái của React như hàm thiết lập của useState() hoặc hàm điều phối của useReducer() có thể truy cập/sửa đổi các trạng thái bên ngoài luồng một chiều của phản ứng.

Nói một cách đơn giản, chúng ta có thể truy cập/sửa đổi trạng thái phản ứng trong các hàm js bình thường bằng cách sử dụng ý tưởng chính này. Bây giờ chúng ta có thể tạo một cửa hàng toàn cầu trung tâm bên ngoài bằng cách sử dụng các chức năng này.

Nghỉ ngơi mọi thứ đều đơn giản. Chỉ cần triển khai cơ chế đồng bộ hóa như pub-sub để đăng ký thay đổi trạng thái cửa hàng toàn cầu này.

useGState là một gói giáo dục cho phép các nhà phát triển hiểu sâu về phản ứng.

Nếu bạn thấy thông tin này hữu ích thì hãy kết nối với tôi trên LinkedIn để biết thêm nội dung như vậy.