بیان مسأله
هنگام کار با React، معمولاً در پروژه های بزرگتر شرکت می کنید. در غیر این صورت، HTML و CSS برای نیازهای توسعه ساده تر کافی است. همانطور که در وب سایت تجارت الکترونیک دیده می شود، یک پروژه اساسی شامل اجزا و عناصر متعددی است. همگام‌سازی این مؤلفه‌ها – مانند به‌روزرسانی سبد خرید و کل با کلیک بر روی «افزودن به سبد خرید» – می‌تواند چالش‌هایی ایجاد کند.
بدون redux به این صورت است که این را اجرا می کنیم
ما در اینجا در حال حفاری پایه هستیم.
در اینجا، کوپلینگ محکم را مشاهده می کنیم زیرا هر جزء برای دسترسی به وضعیت به والد خود متکی است. راه حل در اجرای یک منبع واحد از حقیقت نهفته است.
مفهوم «منبع منفرد حقیقت» حکم می‌کند که اجزای حالت نباید در مؤلفه برنامه، بلکه در یک فروشگاه متمرکز قابل دسترسی برای هر مؤلفه قرار گیرند. سبد خرید در این فروشگاه مشترک می شود و اطمینان حاصل می کند که هر گونه تغییری باعث ارائه مجدد آن می شود. در صفحه محصول، وقتی کالایی اضافه می‌شود، فروشگاه را به‌روزرسانی می‌کند و از سبد خرید می‌خواهد در پاسخ به این تغییرات، دوباره ارائه شود.
معماری Redux
React Redux یک ترکیب کتابخانه محبوب است که در برنامه های React برای مدیریت وضعیت و تسهیل جریان داده استفاده می شود. در اینجا خلاصه ای از معماری آن آمده است:
- با کلیک روی دکمه UI handler.
- دکمه از به عملکرد کنترل کننده و رویداد ارسال عملکرد کنترل کننده می رود.
- رویداد به فروشگاه می رود (فروشگاه می داند با رویداد چه کاری انجام دهد).
- ذخیره رویداد به کاهنده با ارزش فعلی ایالت.
- Reducer تغییرات را بر روی مقدار فعلی بر اساس رویداد انجام می دهد.
- Reducer مقدار جدید را به redux store برمی گرداند.
- فروشگاه Redux آن مقدار جدید را می پذیرد.
- و آن مؤلفه‌هایی که آن مقدار را فهرست کرده‌اند یا مشترک شده‌اند، به‌روزرسانی می‌شوند.
Redux Toolkit و React-Redux را نصب کنید
بسته های Redux Toolkit و React-Redux را به پروژه خود اضافه کنید:
یک فروشگاه Redux ایجاد کنید
فایل store.ts را در پوشه فروشگاه ایجاد کنید
export const store = configureStore({ ... });: تابع configureStore را برای ایجاد یک نمونه فروشگاه Redux فراخوانی می کند. یک شی را با گزینه های پیکربندی می پذیرد.reducer: یک شی که مشخص می کند چگونه برش های مختلف از حالت برنامه باید ترکیب شوند. در این حالت، counterSlice به کلید سبد خرید اختصاص داده می شود. این بدان معنی است که counterSlice وضعیت ذخیره شده در بخش سبد خرید فروشگاه Redux را مدیریت می کند.
کد ارائه شده یک فروشگاه Redux را با استفاده از تابع configureStore @reduxjs/toolkit راه اندازی می کند. فروشگاه را به گونه ای پیکربندی می کند که از یک counterSlice برای مدیریت وضعیت مربوط به سبد خرید استفاده کند. در نهایت، نمونه پیکربندی شده فروشگاه را صادر می کند تا بتوان آن را وارد کرد و در سراسر برنامه برای مدیریت و دسترسی به وضعیت برنامه استفاده کرد.
این مولفه App را برای دسترسی به فروشگاه Redux پیچیده می کند. استفاده از ReactDOM.createRoot و root.render(...) استفاده از React Concurrent Mode را نشان می دهد، که امکان رندر قابل پیش بینی و بهینه سازی عملکرد را در برنامه های مدرن React فراهم می کند.
حالا برش ها را درست می کنیم
هر ویژگی یک برش است، یک برش حالت Redux نشان دهنده یک بخش مدولار و محصور شده از حالت برنامه است که توسط Redux مدیریت می شود. به سازماندهی و مدیریت حالت به شیوه ای ساختارمندتر و قابل نگهداری کمک می کند، به ویژه در برنامه های بزرگتر با نیازهای پیچیده وضعیت.
یک پوشه slices در داخل پوشه redux و در داخل پوشه slices ایجاد پوشه counter و فایل we counter.ts داخل آن ایجاد می کنیم.
- initialState = 0: حالت اولیه برنامه را مشخص می کند که روی 0 تنظیم شده است.
- کاهنده انواع مختلف عمل (INCREMENT و DECREMENT) را با برگرداندن یک حالت جدید بر اساس وضعیت فعلی و نوع عمل کنترل می کند. اگر نوع عمل با هیچ موردی (پیش‌فرض) مطابقت نداشته باشد، وضعیت فعلی را بدون تغییر برمی‌گرداند.
خط export const { increment, decrement, incrementByAmount } = counterSlice.actions فرآیند ایجاد و صدور اکشن سازندگان را از یک تکه Redux که با استفاده از createSlice Redux Toolkit تعریف شده است، ساده می کند. با تولید خودکار این اکشن‌سازها بر اساس کاهش‌دهنده‌های تعریف‌شده، کدهای پاک‌تر و مختصرتر مرتبط با Redux را ترویج می‌کند.
حالا قلاب هایی را در داخل index.ts ایجاد کنید که در یک پوشه جدید به نام پوشه hooks در پوشه redux ایجاد می شود.
useDispatch و useSelector قلاب‌های React Redux هستند که برای تعامل با فروشگاه Redux در اجزای عملکردی استفاده می‌شوند.
useDispatch: هوک برای به دست آوردن یک مرجع به تابع اعزام Redux استفاده می شود که برای ارسال اقدامات به فروشگاه Redux استفاده می شود.
useSelector: هوکی که برای استخراج و برگرداندن داده ها از حالت ذخیره Redux استفاده می شود.
ما می‌توانیم این کار را با حالت ساده انجام دهیم، پس چرا این پیچیده را انجام می‌دهیم، بنابراین اجازه دهید به شما نشان دهم که چرا ایجاد کنید MyComp.ts در src
بنابراین، در اینجا ما یک جزء ساختگی ایجاد می کنیم.
سپس کامپوننت من را در آنجا رندر کنید
بنابراین در اینجا وقتی یک جزء را افزایش می‌دهیم، دیگری نیز رندر می‌شود، زیرا این MyComp نیز از حالت استفاده می‌کند، به این معنی است که اجزای آن ذخیره می‌شوند.
