Redux برای مبتدیان – انجمن DEV

نمای کلی 📖

پاسخ: در برنامه های کاربردی در مقیاس بزرگ با اجزای متعدد وابسته به یکدیگر، حفظ وضعیت برای هر جزء می تواند بسیار پیچیده و دست و پا گیر شود. جابجایی مؤلفه‌ها در چنین سیستمی مستلزم تعدیل‌ها نه تنها در حالت‌های تکی آنها، بلکه در وضعیت‌های همه اجزای مرتبط است. React-Redux این فرآیند را به طور قابل توجهی ساده می کند. این به طور موثر به موضوع “حفاری پایه” می پردازد، که در آن قطعات باید از لایه های متعددی از اجزا عبور داده شوند، در نتیجه مدیریت حالت را ساده می کند و قابلیت نگهداری را افزایش می دهد.

Redux را تعریف کنید: Redux یک کتابخانه برای مدیریت وضعیت برنامه جهانی است. Redux معمولاً با کتابخانه React-Redux برای ادغام Redux و React با هم استفاده می شود.

معماری ردوکس: ⚙️

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

• توزیع کننده رویداد: این عمل از طریق تابع dispatch به فروشگاه Redux ارسال می شود. تابع اعزام مسئول ارسال عمل به فروشگاه Redux است.

• کاهنده ها: سپس فروشگاه Redux از کاهنده‌ها برای مدیریت عمل استفاده می‌کند. Reducerها توابع خالصی هستند که وضعیت فعلی و عملیات ارسال شده را به عنوان آرگومان در نظر می گیرند، عمل را پردازش می کنند و حالت جدیدی را برمی گردانند.

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

• اشتراک دولتی: اجزایی که در فروشگاه Redux مشترک شده اند از تغییرات وضعیت مطلع می شوند. سپس این مؤلفه‌ها می‌توانند با وضعیت به‌روز شده مجدداً رندر شوند و اطمینان حاصل شود که رابط کاربر همیشه با وضعیت برنامه همگام است.

Redux چگونه مشکل را حل می کند؟
پاسخ: Redux مشکلات مدیریت حالت را در برنامه‌های React در مقیاس بزرگ با متمرکز کردن حالت در یک فروشگاه واحد به نام Redux Store حل می‌کند. این معماری مسئله حفاری پایه را حذف می کند، جایی که پایه ها باید از چندین لایه اجزا عبور داده شوند. در عوض، تمام حالت ها در یک مکان مدیریت می شوند و نگهداری و به روز رسانی آن را آسان تر می کند. هنگامی که یک کاربر با رابط کاربری تعامل می کند، یک عملکرد به فروشگاه Redux ارسال می شود. کاهنده ها، که توابع خالص هستند، سپس این اقدامات را برای به روز رسانی حالت پردازش می کنند. مؤلفه‌های مشترک فروشگاه از این تغییرات مطلع می‌شوند و بر این اساس مجدداً ارائه می‌شوند تا اطمینان حاصل شود که رابط کاربری با وضعیت برنامه هماهنگ می‌ماند. این مدیریت متمرکز و قابل پیش بینی حالت، تعاملات پیچیده را ساده می کند و قابلیت نگهداری را افزایش می دهد.

دستورات و روشها:

-> createStore از redux lib : برای ایجاد فروشگاه redux استفاده کنید.

-> ارائه دهنده از react-redux lib : به عنوان ارائه دهنده برنامه ای عمل کنید که از فروشگاه به عنوان ابزار استفاده می کند

-> کاهنده : تابعی است که به عنوان کاهنده عمل می کند که دارای دو پارامتر حالت و عمل است

-> useDispatch از react-redux lib : به عنوان یک توزیع کننده رویداد برای اقدامات عمل کنید.

-> useSelector از react-redux lib: برای انتخاب مقدار از فروشگاه redux استفاده کنید.

• با این حال، همه این روش ها فقط برای اطلاعات اولیه در مورد نحوه عملکرد واقعی معماری redux هستند. اما در عمل ما از جعبه ابزار Redux که کار ما را آسان و ساده تر می کند.

• شما می توانید مثال عملی شمارنده را در پیوند github داده شده در پوشه react-basics: link پیدا کنید

• برای اجرای کد دستور زیر را اجرا کنید:

git clone https://github.com/jemmyasjd/React_Redux
cd react-basics
npm i 
npm run dev

روش‌های جعبه ابزار Redux:

-> configureStore: برای ایجاد فروشگاه redux با استفاده از جعبه ابزار redux استفاده کنید.

-> createSlice : در redux toolkit ما کاهنده را با استفاده از مفهوم sicer می سازیم. این روش برای ایجاد برش استفاده می شود. که نام، حالت اولیه و کاهنده را به عنوان پارامتر شی می گیرند. در کاهنده متدهایی را می سازیم که حالت و عمل را به عنوان ورودی برای تغییر حالت بر اساس اکشن می گیرند.

-> createSelector : برای ایجاد انتخابگر برای اطمینان آسان استفاده کنید

-> استفاده از Dispatch : در جعبه ابزار redux ما نیازی به ذکر صریح نداریم، فقط مستقیماً عمل را از Slice به عنوان پارامتر ارسال می کنیم.

-> useSelector از react-redux lib: برای انتخاب مقدار از فروشگاه redux استفاده کنید.

-> action.payload : شامل تغییراتی است که ما از طریق دیسپچر انجام داده بودیم.

مثال کاربردی افزودن به سبد خرید:

• ابتدا با استفاده از یک فروشگاه ایجاد می کنیم configureStore روش، به این صورت که ما کاهنده را که به عنوان یک برش دهنده نیز در نظر گرفته می شود، عبور می دهیم

• ما کاهش دهنده سبد خرید را با استفاده از آن ایجاد می کنیم createSlice روش

• سپس رویداد را با استفاده از آن ارسال می کنیم استفاده از Dispatch روش

• در نهایت با استفاده از داده ها را از فروشگاه دریافت می کنیم استفاده از انتخابگر

• دریافت کد منبع: اینجا را کلیک کنید

• برای اجرای کد دستور زیر را اجرا کنید:

git clone https://github.com/jemmyasjd/React_Redux
cd React Toolkit Code
npm i 
npm start

روش های فراخوانی Api:

-> createasyncThunk : برای ایجاد عمل واکشی داده‌هایی که انجام می‌شوند (“نام”، تابع پاسخ به تماس) استفاده می‌شود که در هنگام ارسال اقدام فعال می‌شود.

-> علاوه بر این ما داریم

extraReducers: (builder) => {
builder.addCase(fetchTodos.pending, (state, action) => {
  state.isLoading = true;
});
builder.addCase(fetchTodos.fulfilled, (state, action) => {
  state.isLoading = false;
  state.data = action.payload;
});
builder.addCase(fetchTodos.rejected, (state, action) => {
  console.log("Error", action.payload);
  state.isError = true;
});

مثال عملی واکشی todo:

• واکشی todos با استفاده از createThunk روش

نتیجه

این وبلاگ به بررسی این موضوع پرداخته است که چگونه Redux مدیریت حالت را در برنامه‌های React در مقیاس بزرگ با متمرکز کردن حالت در فروشگاه Redux، حذف حفاری پایه، و ارتقای ثبات، ساده‌سازی می‌کند. معماری اکشن ها، توزیع کننده ها، کاهش دهنده ها و اشتراک ها قابلیت نگهداری را افزایش می دهد. Redux Toolkit با کاهش صفحه دیگ، جریان کار را ساده تر می کند. مثال‌های عملی، مانند «افزودن به سبد خرید» و مدیریت API با createAsyncThunk، قابلیت های Redux را به نمایش بگذارد. این ابزارها توسعه دهندگان را قادر می سازند تا برنامه های React مقیاس پذیر و قابل نگهداری بسازند و Redux را در توسعه وب مدرن ضروری می کند. برای درک عمیق تر، مخزن GitHub ارائه شده پیاده سازی های عملی را ارائه می دهد.