رسیدگی به به روزرسانی های خوش بینانه در جعبه ابزار Redux (بدون کتابخانه های شخص ثالث)

منتظر تأیید سرور قبل از به روزرسانی UI احساس لاغری می شود. در برنامه های دنیای واقعی ، کاربران انتظار بازخورد نزدیک به فوری دارند. به روزرسانی های خوش بینانه را وارد کنید: بلافاصله در حالی که سرور به دست می آید ، تغییرات در UI را منعکس کنید. Redux Toolkit این مسئله را به طرز شگفت آور تمیز می کند – به کتابخانه های اضافی مورد نیاز نیست.

به روزرسانی های خوش بینانه چیست؟

به جای انتظار برای پاسخ به شبکه ، فرض می کنید که این عمل موفق خواهد شد و UI را فوراً به روز می کند. اگر سرور بعداً با خطایی پاسخ دهد ، شما به عقب برگردید یا تصحیح را نشان دهید.

مرحله 1: برش را برای حالتهای در حال انتظار ساختار دهید

بیایید یک به روزرسانی خوش بینانه را برای یک ویژگی “مانند” مدل کنیم:

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const likePost = createAsyncThunk(
  'posts/likePost',
  async (postId) => {
    await axios.post(`/api/posts/${postId}/like`);
    return postId;
  }
);

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    error: null,
  },
  reducers: {
    optimisticLike(state, action) {
      const post = state.posts.find(p => p.id === action.payload);
      if (post) {
        post.likes++;
      }
    },
    revertLike(state, action) {
      const post = state.posts.find(p => p.id === action.payload);
      if (post) {
        post.likes--;
      }
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(likePost.fulfilled, (state, action) => {
        // No-op because UI already updated optimistically
      })
      .addCase(likePost.rejected, (state, action) => {
        state.error="Failed to like post";
      });
  },
});

export const { optimisticLike, revertLike } = postsSlice.actions;
export default postsSlice.reducer;

مرحله 2: اعزام به ترتیب درست

در مؤلفه React شما:

// src/features/posts/LikeButton.js
import { useDispatch } from 'react-redux';
import { optimisticLike, revertLike, likePost } from './postsSlice';

function LikeButton({ postId }) {
  const dispatch = useDispatch();

  const handleLike = () => {
    dispatch(optimisticLike(postId));
    dispatch(likePost(postId)).unwrap().catch(() => {
      dispatch(revertLike(postId));
    });
  };

  return (
    Like
  );
}

چگونه کار می کند

• اول ، optimisticLike بلافاصله در ایالت محلی لایک ها را افزایش می دهد.
• سپس ، likePost درخواست API واقعی را ارسال می کند.
• در صورت عدم موفقیت ، revertLike UI را با کاهش اصلاح می کند.

جوانب مثبت و منفی

✅ جوانب مثبت

• بازخورد فوری برای کاربران
• کد بسیار کمی با ابزار Redux
• پاسخگویی UI را از عملکرد سرور جدا می کند

⚠ منفی

• موارد لبه اگر حالت سرور متفاوت باشد (به عنوان مثال ، شرایط مسابقه داده)
• منطق بازگشت می تواند برای عملیات مهم تر پیچیده شود

🚀 گزینه های دیگر

• پرس و جو RTK: اگر از RTKQ برای واکشی داده ها استفاده می کنید ، به روزرسانی های خوش بینانه را به روز می کند
• پرس و جو Tanstack: (غیر REDUX) از پشتیبانی داخلی برای جهش های خوش بینانه برخوردار است

خلاصه

به روزرسانی های خوش بینانه فقط برای برنامه های فانتزی نیستند – آنها برای UX عالی اساسی هستند. با قابلیت های داخلی Redux Toolkit ، می توانید بدون نیاز به وابستگی های خارجی ، این الگوی پیشرفته را به صورت پاک اجرا کنید.

اگر این موضوع را مفید دیدید ، می توانید از من در اینجا پشتیبانی کنید: buymeacoffee.com/hexshift