مدیریت مستقیم دولت مشترک در React: GroundState

با نگاهی به تعداد زیادی از مدیریت دولت React مانند redux ، Zustand ، Jotai ، Mobx و غیره (و با استفاده از برخی از آنها) ، من تعجب می کردم: آیا نمی توانیم چیزی را به همان اندازه ساده و تک منظوره به عنوان React ارائه دهیم useState() برای چیزی به اندازه دولت مشترک و تقریباً همه گیر؟

من یک lib پیدا کردم که API آن تقریباً به چیزی بسیار ساده نزدیک است ، Jotai است. اما پس از نگاه دقیق تر ، هنوز هم به نظر می رسد که بیش از حد بیش از حد است. بنابراین من یک مورد دیگر را ایجاد کردم (در واقع ، قبل از کشف Jotai).

به آن GroundState گفته می شود ، و اینگونه کار می کند. ما بخشی از حالت یک مؤلفه را به یک مکان مشترک منتقل خواهیم کرد و فقط با تعویض useState() با یک قلاب دیگر و با بسته بندی ارزش دولت با Store کلاس:

import {Store, useStore} from 'groundstate';

+ let AppContext = createContext(new Store(0));

let Counter = () => {
-   let [value, setValue] = useState(0);
+   let [value, setValue] = useStore(useContext(AppContext));

    let handleClick = useCallback(() => {
        setValue(value => value + 1);
    }, [setValue]);

    return {value};
};

قبل از تغییرات ، مقدار پیشخوان فقط برای خود مؤلفه قابل مشاهده بود. پس از تغییرات ، به مقدار پیشخوان می توان از خارج از خارج دسترسی پیدا کرد Counter مؤلفه در مثال بالا ، ما یک مقدار ابتدایی در فروشگاه داریم ، اما می تواند هر نوع باشد.

نکته این است که این تنظیم دولت مشترک تا حد امکان چند واسط useState()بشر این بدان معناست که راه اندازی دولت مشترک تقریباً بی دردسر است ، همچنین امکان مهاجرت سریع از دولت محلی به دولت مشترک و راه دیگر را فراهم می کند.

به صورت اختیاری ، علاوه بر به اشتراک گذاشتن دولت ، انتقال دولت از این جزء در واقع می تواند به عنوان دولت محلی مداوم نیز مورد استفاده قرار گیرد.

جزئیات بیشتر

همانطور که در مثال بالا دیدیم ، تمام آنچه برای راه اندازی حالت مشترک لازم است این است useStore() قلاب و Store کلاس.

در Store کلاس روش هایی را برای دسترسی و به روزرسانی مقدار حالت فراهم می کند. در useStore() هوک مؤلفه ای را برای تغییرات حالت فروشگاه مشترک می کند و ارزش دولت را از فروشگاه باز می کند.

اشاره به نمونه Store کلاس به متن منتقل شد (به عنوان اولیه new Store(0) در مثال بالا) وقتی وضعیت آن را از طریق به روز می کنیم تغییر نمی کند setValue(): وضعیت فروشگاه تغییر می کند ، نمونه فروشگاه نمی کند. این بدان معنی است که به روزرسانی دولت باعث ایجاد مجدد مجدد در کل درخت DOM نمی شود که به طور پیش فرض به ارائه دهنده زمینه در توجیه شده است ، و فقط بر مؤلفه هایی که صریحاً از طریق فروشگاه مشترک هستند ، تأثیر می گذارد useStore() قلاب علاوه بر این ، useStore() هوک همچنین گزینه ای را برای تنظیم دقیق پاسخگویی مؤلفه برای ذخیره به روزرسانی ها ، در صورت لزوم ارائه می دهد.

و این ، در اصل ، آنچه رویکرد یک منظوره مینیمالیستی GroundState را برای مدیریت مشترک دولت که من به دنبال آن بوده ام ، تشکیل می دهد.

مشاهده سطح زمین در GitHub