آیا Redux مرده است؟ چرا Redux را از برنامه SaaS خود حذف کردم؟

🔥اتصال: https://www.subham.online

🔥تویتر: https://twitter.com/TheSubhamMaity

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

💡 معضل ردوکس

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

قبل (با Redux):

// Action
const fetchUserData = (userId) => async (dispatch) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const response = await api.fetchUser(userId);
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', error });
  }
};

// Reducer
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

// Component
const UserProfile = ({ userId, fetchUserData, userData, loading, error }) => {
  useEffect(() => {
    fetchUserData(userId);
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={userData} />;
};

const mapStateToProps = (state) => ({
  userData: state.user.data,
  loading: state.user.loading,
  error: state.user.error,
});

export default connect(mapStateToProps, { fetchUserData })(UserProfile);

بعد (با React Query):

const useUserData = (userId) => {
  return useQuery(['user', userId], () => api.fetchUser(userId));
};

const UserProfile = ({ userId }) => {
  const { data, isLoading, error } = useUserData(userId);

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={data} />;
};

export default UserProfile;

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

🤔 اما صبر کنید، آیا Redux همه بد است؟

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

پس چرا هیاهو؟ گاهی اوقات، به عنوان توسعه دهنده، ما در دام استفاده از چیزهای آشنا می افتیم، حتی زمانی که ابزارهای بهتری وجود دارد. این چیزی است که برای من و Redux اتفاق افتاد. من در روش های قدیمی خود گیر کرده بودم و فکر می کردم Redux تنها راه برای مدیریت وضعیت در برنامه های بزرگتر است. منظورم این است که کل اینترنت می گفت “Redux or bust!” درست است؟

🎭 The Plot Twist

راه حل این است: با حذف Redux، ما در واقع برنامه خود را مقیاس پذیرتر کردیم. ضد شهودی، درست است؟ اما در مورد آن فکر کنید – با React Query که وضعیت سرور ما را مدیریت می‌کند و قلاب‌های سفارشی که وضعیت محلی را مدیریت می‌کنند، ما نگرانی‌ها را از هم جدا کردیم. هر بخش از برنامه ما مدولارتر شد و استدلال در مورد آن آسان تر شد.

🏁 آیا ردوکس مرده است؟

راستش را بخواهید در چند ماه گذشته موارد بسیار کمی را دیده ام که React Query پاسخگوی نیازهای من نباشد.

بنابراین، آیا Redux مرده است؟ شاید نه، اما قطعاً آن ستاره سابق نیست. برای مدیریت وضعیت سرور در برنامه های مدرن React

بنابراین، شما آن را دارید. سفر ما از اعتیاد به Redux تا روشنگری React Query. همیشه آسان نبود – لحظات شک، جلسات رفع اشکال در اواخر شب، و بیش از چند کف دست وجود داشت. اما در نهایت ارزشش را داشت.

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

گاهی اوقات کمتر، بیشتر است. به خصوص در مورد مدیریت دولتی. حالا اگر ببخشید، من چند کاهنده دیگر برای حذف دارم. کد نویسی مبارک!