تسلط بر مدیریت دولتی در React: نکات و بهترین روش ها

هنگامی که برنامه A React را توسعه می دهید، باید وضعیت را مدیریت کنید.
و باید به تعداد ایالت ها فکر کنید.

اگر از حالت به روش اشتباه استفاده کنید، اندازه حالت بزرگتر و بزرگتر می شود.
و برنامه پیچیده تر خواهد شد.

بنابراین، شما باید تعداد ایالات را کاهش دهید.

در این مقاله به شما نشان خواهم داد که چگونه تعداد ایالت ها را کاهش دهید.

1. سند رسمی را بخوانید !!!(مهم)

در سند رسمی React، می‌توانید بهترین روش‌ها را برای مدیریت ایالت بیابید.
https://react.dev/learn/choosing-the-state-structure

این سند برای مدیریت ایالت بسیار مفید است، اما اکثر مردم متوجه نمی شوند که با ایالت مشکل دارند.

بنابراین، توصیه می کنم ابتدا این سند را بخوانید.
و چند نمونه از نکات نوشته شده در این سند را معرفی خواهم کرد.

1.1 سعی کنید از وضعیت شی استفاده کنید.

راه های زیادی برای مدیریت دولت وجود دارد.

اگر حالت را همزمان به روز کنید، می توانید از وضعیت شی استفاده کنید.
این مثال بد است.

const [ name, setName ] = useStatestring>('');
const [ age, setAge ] = useStatenumber>(0);

این بد است زیرا اگر برنامه دولتی را بخوانید، ممکن است فکر کنید که نام و سن به هم مرتبط نیستند و هماهنگ نیستند. و برای یافتن رابطه بین نام و سن باید کد را جستجو کنید.

در این مورد، می توانید از وضعیت شی استفاده کنید، دقیقاً مانند این.

const [ user, setUser ] = useState{ name: string, age: number }>({ name: '', age: 0 });

و شما می توانید از این حالت به این صورت استفاده کنید.

const onChangeName = (e: React.ChangeEventHTMLInputElement>) => {
    setUser({ ...user, name: e.target.value });
};

اما باید مراقب به‌روزرسانی وضعیت شی در یک عبارت باشید.
برای به روز رسانی وضعیت شی باید از عملگر spread استفاده کنید.
شما نمی توانید از این کد استفاده کنید.

// This is wrong.
const onChangeName = (e: React.ChangeEventHTMLInputElement>) => {
    setUser({ name: e.target.value });
};

این نکات نیز در سند رسمی نوشته شده است.

پس ابتدا باید سند رسمی را مطالعه کنید.

2. قلاب مشترک ایجاد کنید.

برای کاهش تعداد مراحل برنامه، باید حالت استفاده نشده را حذف کنید.

بیشتر اوقات، شما از یک حالت در چندین مؤلفه استفاده خواهید کرد.

// Page1.tsx
const [ notification, setNotification ] = useStateNotification | null>(null);

// Page2.tsx
const [ notification, setNotification ] = useStateNotification | null>(null);

// Page3.tsx
const [ notification, setNotification ] = useStateNotification | null>(null);

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

import { useState } from 'react';

export const useNotification = () => {
    const [ notification, setNotification ] = useStateNotification | null>(null);
    return { notification, setNotification };
};

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

import { useNotification } from './hooks/useNotification';

const Page = () => {
    const { notification, setNotification } = useNotification();
};

3. از Global Context یا Global State Library استفاده کنید

کتابخانه های Global Context و Global State برای به اشتراک گذاری وضعیت بین اجزا بسیار مفید هستند. این یک نسخه پیشرفته از قلاب معمولی است.

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

import { createContext, useContext, useState } from 'react';

const UserContext = createContext{ user: User | null, setUser: (user: User) => void }>({
    user: null,
    setUser: () => {},
});

export const UserProvider: React.FC = ({ children }) => {
    const [ user, setUser ] = useStateUser | null>(null);
    return (
        UserContext.Provider value={{ user, setUser }}>
            {children}
        UserContext.Provider>
    );
};

export const useUser = () => {
    const { user, setUser } = useContext(UserContext);
    return { user, setUser };
};

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

import { useUser } from './hooks/useUser';

const Page = () => {
    const { user, setUser } = useUser();
};

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

با این حال، هنگام استفاده از حالت جهانی، فراموش نکنید که وقتی دیگر به آن نیاز ندارید، حالت را بازنشانی کنید. در غیر این صورت وضعیت تا زمان بسته شدن صفحه در حافظه باقی می ماند. بنابراین، من همچنین ایجاد یک قلاب تنظیم مجدد را توصیه می کنم.

export const useResetUser = () => {
    const { setUser } = useContext(UserContext);
    return () => setUser(null);
};

کتابخانه های زیادی برای کشورهای جهانی وجود دارد. به عنوان مثال Redux، Recoil، Mobx و غیره.
من Recoil را توصیه می کنم. زیرا استفاده از آن بسیار ساده و آسان است.

4. سعی کنید از openapi generator استفاده کنید

اگر از openapi استفاده می کنید، می توانید کد کلاینت react api fetch را به صورت خودکار ایجاد کنید.
این برای کاهش تعداد مراحل برنامه بسیار مفید است.

می توانید کد کلاینت api را از فایل openapi yaml تولید کنید.

npx @openapitools/openapi-generator-cli generate -i openapi.yaml -g typescript-fetch -o api

و می توانید از این کد کلاینت api به این صورت استفاده کنید.

import { api } from './api';

const Page = () => {
    const fetchUser = async () => {
        const user = await api.getUser();
    };
};

و برخی از انواع ژنراتور openapi می توانند کد React Hook را تولید کنند.

npx @openapitools/openapi-generator-cli generate -i openapi.yaml -g typescript-react-query -o api

و می توانید از این کد کلاینت api به این صورت استفاده کنید.

import { useGetUserQuery } from './api';

const Page = () => {
    const { data, error, isLoading } = useGetUserQuery();
};

بنابراین، شما نیازی به ایجاد حالت بارگذاری، وضعیت خطا و وضعیت داده ندارید.

البته باید فایل api yaml باز را نگهداری کنید و به روند توسعه فکر کنید.
اما این برای کاهش تعداد مراحل برنامه بسیار مفید است.

نتیجه گیری

در این مقاله به شما نشان دادم که چگونه تعداد حالت را کاهش دهید.
اما این تنها راه کاهش تعداد ایالت ها نیست.

شما باید به ساختار دولت و روابط دولتی فکر کنید.
و شما باید در مورد استفاده دولت فکر کنید.

امیدوارم این مقاله به شما در کاهش تعداد ایالت کمک کند.

ممنون که خواندید.