State management in Frontend

Frontend dasturlashda state management — bu dasturni boshqarish jarayoni. Bu jarayon foydalanuvchining interfeys bilan o‘zaro aloqasini sinxronlashtirishda muhim rol o‘ynaydi. Birinchi state nima ekanini va uni boshqarish usullarini ko'rib chiqamiz.

State nima?

Frontendda state — bu dasturdagi ma'lumotlarning o'zgaruvchan holati. Masalan:

Foydalanuvchining login holati (kirgan yoki chiqib ketgan).
Korzinkadagi mahsulotlar ro'yxati.
Formadagi foydalanuvchi tomonidan kiritilgan ma'lumotlar.

State-ni boshqarish to'g'ri ishlatilinmasa, dastur ishlashida muammolar yuzaga kelishi mumkin, masalan:

Ma'lumotlar sinxronligi buzilishi.
Kutilmagan xatoliklar.

State Management turlari

State boshqarishni ikki asosiy turga ajratish mumkin:

1. Local State

Bu komponent ichida saqlanadigan va boshqariladigan state. Odatda kichik loyihalar uchun yetarli bo‘ladi. Misol uchun, React’da useState va useReducer yordamida local state boshqariladi.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

2. Global State

Bu bir nechta komponentlar orasida ma'lumot almashinadigan state. Katta loyihalarda global state boshqarish uchun maxsus kutubxonalardan foydalaniladi.

Foydalanish hollari:

Foydalanuvchi ma'lumotlarini boshqarish (masalan, profil yoki autentifikatsiya holati).

Global state boshqarish uchun mashhur kutubxonalar:

Redux
MobX
Zustand
React Context API

Shaxsiy tajriba

Frontend dasturchi sifatida 3 yilga yaqin tajribamdan kelib chiqib, shu paytgacha State management uchun Redux va React query foydalanganman. Ko'pgina loyihalarni o'zim boshlaganimda React querydan foydalanaman.

Redux, Redux toolkit bulardan foydalanmaysizmi degan savol bo'lishi mumkin?

Bulardan foydalanish loyihani qurayotkan insonga bog'liq agar u shu tehnologiyalar asosida boshlasa ishni, loyiha yakunlaganiga qadar shundan foydalanadi Frontend dasturchilar.

React query yordamida o'zim katta projectlar uchun hook sifatida yaratib olaman har bir Create, Update, Delete, Get uchun ulardan birini namuma sifatida ko'rsatib o'taman.

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { request } from 'services/request';

const deleteRequest = (url) => request.delete(url);

const useDeleteQuery = ({ listKeyId }) => {
  const queryClient = useQueryClient();
  const { t } = useTranslation();

  const { mutate, isError, error, isLoading } = useMutation(
    ({ url }: { url }) => deleteRequest(url),
    {
      onSuccess: (data) => {
        toast.success(data?.data?.message || t('SUCCESSFULLY DELETED'));

        if (listKeyId) {
          queryClient.invalidateQueries(listKeyId);
        }
      },
      onError: (error) => {
        toast.error(error?.response?.data?.error?.message || 'ERROR');
      }
    }
  );

  return {
    mutate,
    isError,
    error,
    isLoading
  };
};

export default useDeleteQuery;

Namunada ko'rganizdek Loyihadagi Delete function uchun alohida useDeleteQuery funksiyasi yozilgan va u orqali istalgan joyda, URL va KEY berish orqali foydalanish mumkin.

Shu bilan ushbu mavzudagi postni yakunlamoqchiman. Xato va kamchiliklar bo'lsa uzr va men ham sizdek shu sohadagi o'rganuvchi insonman.

Mualliflik huquqiga amal qilinsin!

t.me/Muhammadislom_Dev