آموزش Redux-Saga را با Redux-Toolkit در React JS یاد بگیرید
Learn Redux-Saga with Redux-Toolkit in React JS
سلام، به این کلاس Skillshare خوش آمدید. در این کلاس، من به شما آموزش می‌دهم که چگونه می‌توانید کتابخانه میان‌افزار محبوب به نام Redux-Saga را با Redux-Toolkit در React Application خود ادغام کنید. Redux-Toolkit در حال حاضر راه حل های متفاوتی را برای مقابله با عملیات ناهمزمان مانند تماس Api، ذخیره داده ها در فضای ذخیره سازی محلی و غیره با CreAsyncThunk یا RTK Query ارائه می دهد، اما گاهی اوقات بنا به نیاز برنامه ممکن است مجبور شوید از Redux-Saga با Redux-Toolkit در برنامه react خود استفاده کنید. .
بنابراین، این دوره عالی برای یادگیری ادغام Redux-Saga با Redux-Toolkit در برنامه React است. ساختن اپلیکیشن با کمک React و Redux-Saga به همراه Redux-Toolkit در این دوره، مهارت های شما را در توسعه وب مدرن تقویت می کند.
با کمک Redux-Saga Redux-Toolkit با نحوه کار با api در React Application آشنا خواهید شد.
درباره Redux-Saga
redux-saga کتابخانه‌ای است که قصد دارد اثرات جانبی برنامه (مانند موارد ناهمزمان مانند واکشی داده‌ها و چیزهای ناخالص مانند دسترسی به حافظه پنهان مرورگر) را آسان‌تر مدیریت کند، اجرا را کارآمدتر کند، اجرا را آسان‌تر کند. تست کنید، و در مدیریت شکست بهتر است.
مدل ذهنی این است که یک حماسه مانند یک رشته جداگانه در برنامه شما است که تنها مسئول عوارض جانبی است. redux-saga یک میان افزار redux است، به این معنی رشته را می توان با اقدامات redux معمولی شروع، متوقف کرد و از برنامه اصلی لغو کرد، به وضعیت برنامه redux کامل دسترسی دارد و همچنین می تواند اقدامات redux را ارسال کند.
از یک ویژگی ES6 به نام Generators استفاده می‌کند تا خواندن، نوشتن و آزمایش آن جریان‌های ناهمزمان را آسان کند. با انجام این کار، این جریان‌های ناهمزمان شبیه کد استاندارد جاوا اسکریپت سنکرون شما به نظر می‌رسند. (نوعی مانند async/wait، اما ژنراتورها چند ویژگی عالی دیگر دارند که ما به آن نیاز داریم)
ممکن است قبلاً از redux-thunk برای مدیریت واکشی داده‌های خود استفاده کرده باشید. برخلاف redux thunk، شما در جهنم برگشت به تماس قرار نمی‌گیرید، می‌توانید جریان‌های ناهمزمان خود را به راحتی آزمایش کنید و اقدامات شما خالص باقی می‌مانند.
در این دوره آموزشی، مفهوم کلیدی مرتبط با Redux-Toolkit Redux-Saga با React را در زیر یاد خواهید گرفت:
Redux-Saga چگونه با Redux-toolkit در یک برنامه تک صفحه ای جلویی با React مطابقت دارد؟
Redux و Redux-Toolkit را درک کنید
- تابع Redux-Saga Generator را درک کنید.
چگونه Redux-Saga را با Redux-Toolkit پیکربندی کنیم؟
- استفاده از OMDB شخص ثالث API را یاد خواهید گرفت.
شما یاد خواهید گرفت که شنونده حماسه ایجاد کنید.
- شما افکت های مختلف redux-saga مانند put، takeLatest، fork، all call را خواهید آموخت.
با استفاده از آخرین کتابخانه Materal-UI برای ساخت کامپوننت آشنا شوید.
نیاز اساسی
- به نوعی دانش HTML، CSS و جاوا اسکریپت نیاز است.
- درک اولیه ماژول ES6
- دانش اولیه React یک مزیت اضافه خواهد کرد.
- دانش پایه Redux امتیاز مثبت خواهد بود.
نرم افزار مورد نیاز
- .
- .
در این دوره با کمک Redux-Saga Redux-Toolkit در React به سراغ اپلیکیشن جستجوی فیلم می رویم. ما یاد خواهیم گرفت که از API شخص ثالث OMDB با میان افزار Redux-Saga استفاده کنیم. می‌توانید یاد بگیرید که چگونه می‌توانید Redux-Saga Redux-Toolkit را با React ترکیب کنید. ما از کتابخانه Material-UI برای ساخت کامپوننت استفاده خواهیم کرد.
اگر با مشکلی روبرو هستید یا شک دارید، می‌توانید شک یا سؤال خود را در اینجا ارسال کنید. من خوشحال خواهم شد که به شما کمک کنم.
تکلیف
اکنون زمان تعیین تکلیف است. در جزئیات صفحه فیلم، جزئیات بیشتری درباره فیلم خاص مانند کشور، جنس، زبان، زمان اجرا، نویسنده، جوایز، رتبه‌بندی‌ها و فهرست نمایش بازیگران اضافه کنید. برای رتبه‌بندی، می‌توانید از یک بسته npm به نام react-star-ratings استفاده کنید.
پس از تکمیل این کار، می‌توانید تکلیف خود را در اینجا پست کنید با ارائه URL git-hub
درس ها Lessons
-
کار روی Saga Working on Saga
-
Redux-Toolkit چیست؟ What is Redux-Toolkit ?
-
کلید OMDB API را پیکربندی کنید Configure OMDB API Key
-
مقدمه Introduction
-
خطای رسیدگی Handling Error
-
بسته شدن Wrap Up
-
Redux-Saga چیست؟ What is Redux-Saga ?
-
اکشن، API و حماسه - تک فیلم Action, API & Saga - Single Movie
-
Redux چیست و چرا از آن استفاده می کنیم؟ What is Redux and Why we use it ?
-
ژنراتور چیست؟ What is Generator ?
-
ساختار برنامه و پاکسازی App Structure & Clean-Up
-
راه اندازی پروژه Project Set-Up
-
رندر مورد فهرست فیلم Render Movie List item
-
صفحه جزئیات فیلم Movie Detail Page
-
Redux-Toolkit و Redux-Saga را پیکربندی کنید Configure Redux-Toolkit and Redux-Saga
-
کار بر روی Actions & API - Fetch Movies Working on Actions & API - Fetch Movies
-
مسیریابی را فعال کنید Enable Routing
-
کار بر روی جستجو Working on Search
https://donyad.com/d/80b9
Saumitra Vishal
توسعه دهنده Front End
من توسعه دهنده وب جلویی هستم و در زمینه React JS تخصص دارم
من مدرک لیسانس علوم کامپیوتر از دانشگاه KIIT دارم.
خوشحال می شوم دانش خود را به اشتراک بگذارم و محتوای عالی برای همه کسانی که می خواهند به کلاس های من بپیوندند ایجاد کنم.
شما همچنین می توانید در پلتفرم یوتیوب من به من بپیوندید، من بیش از 8 هزار مشترک در کانال یوتیوب خود دارم.
بیایید با هم چیزهای عالی بسازیم :)
نمایش نظرات