بهبود تجربه کاربر با به روز رسانی خوش بینانه

هی مردم،

گاهی اوقات برای بهبود تجربه کاربری می توانید تصمیم بگیرید که روی موفقیت کد خود شرط بندی کنید، بنابراین می توانید فرض کنید که کد به درستی پیش می رود تا برنامه شما را در چشم کاربران شما سریعتر کند. این رویکرد به‌روزرسانی خوش‌بینانه نامیده می‌شود و می‌توان آن را در برخی از خطوط کد با استفاده از پرس و جو واکنش نشان داد. useMutation قلاب. بله، این رویکرد مانند یک شرط بندی با کد است، اما همچنین مهم است که به خاطر داشته باشید تا در صورت شکست، خطاها را مدیریت کنید.

برای مدیریت به‌روزرسانی خوش‌بینانه، باید یک مورد را مدیریت کنید useMutation در پایگاه کد خود قلاب کنید. این قلاب سه رویداد را برای انجام به‌روزرسانی خوش‌بینانه نشان می‌دهد: onMutate، onSuccess و onError.

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

را onSuccess رویداد در صورت موفقیت جهش نامیده می شود. اگر کد شما در این رویداد پرش کند، شما در امان هستید و همه چیز به درستی پیش رفته است.

را onError رویداد در صورت شکست جهش نامیده می شود. اگر کد شما در داخل این رویداد است، متأسفانه مشکلی پیش آمده است. در این حالت، باید بازگرداندن حالت به حالت قبلی را انجام دهید و به کاربر اطلاع دهید که مشکلی پیش آمده است.

برای کمک به درک بهتر قضیه اجازه دهید مثالی را ببینیم

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useSnackbar } from 'notistack';

const editTodoRequest = async (todo: Todo): Promise<Todo> => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const response = await fetch(`api/tasks/${todo.id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(todo),
  });
  if (!response.ok) {
    throw new ResponseError(`Failed to edit todo with id ${todo.id}`, response);
  }
  return await response.json();
};

type UseEditTodo = (todo: Todo) => void;

export const useEditTodo = (): UseEditTodo => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  const client = useQueryClient();
  const { mutate: editTodo } = useMutation<
    Todo,
    unknown,
    Todo,
    {
      oldTodos?: Todo[];
      oldTodo?: Todo;
      messageKey: string | number;
    }
  >(editTodoRequest, {
    onMutate: (todo) => {
      const messageKey = enqueueSnackbar('Todo edited', {
        variant: 'success',
      });
      const oldTodos = client.getQueryData<Todo[]>([QUERY_KEY.todos]);
      const oldTodo = client.getQueryData<Todo>([QUERY_KEY.todos, todo.id]);
      client.setQueryData([QUERY_KEY.todos, todo.id], todo);
      client.setQueryData<Todo[]>([QUERY_KEY.todos], (oldTodos) =>
        oldTodos?.map((oldTodo) => (oldTodo.id === todo.id ? todo : oldTodo))
      );

      return {
        oldTodos,
        oldTodo,
        messageKey,
      };
    },
    onSuccess: () => {
      client.invalidateQueries([QUERY_KEY.todos]);
    },
    onError: (error, todo, ctx) => {
      if (!ctx) return;
      const { oldTodos, oldTodo, messageKey } = ctx;
      closeSnackbar(messageKey);
      const errorMessage = mapError(error);
      enqueueSnackbar(
        `Ops! There was an error on editing todo: ${errorMessage}`,
        {
          variant: 'error',
        }
      );
      client.setQueryData([QUERY_KEY.todos, todo.id], oldTodo);
      client.setQueryData<Todo[]>([QUERY_KEY.todos], oldTodos);
    },
  });

  return editTodo;
};

همانطور که متوجه شدید، در رویداد mutate، کد یک نان تست برای کاربر ایجاد می کند که نشان می دهد همه چیز به درستی پیش رفته است و پس از آن، کد حالت فعلی را می گیرد، آن را برمی گرداند و وضعیت را با مقادیر جدید به روز می کند. . بازگشت مهم است زیرا اجازه می دهد تا این داده ها در onError رویداد در صورت شکست را onError رویداد، همانطور که می‌بینید، بازیابی حالت را کنترل می‌کند، نان تست موفقیت را حذف می‌کند و مورد جدیدی را با پیام خطا نشان می‌دهد. اگر می‌خواهید یک به‌روزرسانی خوش‌بینانه را مدیریت کنید، این بخش بسیار مهم است، زیرا در صورت شکست به کاربر بازخورد می‌دهد.

آخرین اما نه کم اهمیت، شما همچنین می توانید رسیدگی کنید onSuccess رویداد اگر می‌خواهید یک پرس و جو را پس از جهش یا برای انگیزه دیگری باطل کنید. را onSuccess همیشه مورد نیاز نیست اما بستگی به مورد شما دارد.

خوب، فکر می‌کنم اکنون ایده‌ای در مورد نحوه عملکرد به‌روزرسانی خوش‌بینانه در پرس و جوی واکنش دارید، اما اگر می‌خواهید در آن غوطه‌ور شوید، ویدیوی یوتیوب من را نیز ببینید.

https://www.youtube.com/watch?v=IwkhNxIyyzA

من فکر می کنم این همه از این مقاله است. امیدوارم از این مطالب لذت برده باشید!

به زودی می بینمت مردم

بای بای 👋

ps می توانید کد ویدیو را پیدا کنید اینجا

عکس راهول میشرا در Unsplash