آموزش راهنمای کامل Redux-Toolkit با React JS

Complete Guide to Redux-Toolkit with React JS

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره:

با افزودن مجموعه Redux-Toolkit Skill به دانش React خود، به یک توسعه دهنده Frontend بسیار مورد تقاضا تبدیل شوید. این دوره به گونه ای طراحی شده است که هر کسی که می خواهد مفهوم Redux خود را ارتقا دهد می تواند در این دوره ثبت نام کند.

این دوره مبتنی بر پروژه شما را بلافاصله کدنویسی می کند. ساخت اپلیکیشن با کمک React و Redux-Toolkit در این دوره، مهارت های شما را در توسعه وب مدرن تقویت می کند.

با کمک createAsyncThunk ، می‌توانید با نحوه کار با api در React Application آشنا شوید. و من مطمئن هستم که پس از گذراندن این دوره، استاد پیاده سازی Redux-Toolkit در هر یک از برنامه های React موجود خود خواهید شد.

در این دوره، مفهوم کلیدی مرتبط با Redux-Toolkit با React را در زیر یاد خواهید گرفت:

چگونه Redux-toolkit با React در یک برنامه تک صفحه ای جلویی قرار می گیرد؟
Redux-Toolkit چیست و API آن چیست؟
چگونه فروشگاه را با Redux-Toolkit پیکربندی کنیم؟
آموزش API مختلف Redux-Toolkit مانند createSlice، configureStore، createAction، createReducer createAsyncThunk
چگونه با Redux-Tookit با استفاده از createAsyncThunk یک درخواست API ایجاد کنیم و با پاسخ مقابله کنیم؟
درک چرخه حیات وعده متفاوتی که توسط createAsyncThunk میان‌افزار ایجاد می‌شود.
فریمورک طراحی مورچه را برای ساخت کامپوننت React بیاموزید.

الزامات اساسی

به نوعی دانش HTML، CSS و جاوا اسکریپت نیاز است.
درک اولیه ماژول ES6
دانش اولیه React یک مزیت اضافه خواهد کرد.
دانش Redux کمی نیاز دارد، اما من از ابتدا توضیح خواهم داد.
هیچ تجربه کاری قبلی با سرور JSON لازم نیست.

نرم افزار مورد نیاز

در این دوره آموزشی، ساختن برنامه کامل React CRUD را با کمک Redux-Toolkit با استفاده از سرور api جعلی JSON Placeholder یاد خواهید گرفت. با creatAsyncThunk می‌توانید درخواست‌های api مختلف مانند GET، PUT، POST و DELETE را در برنامه React خود انجام دهید. برای توسعه دهندگان React مبتدی، استفاده از سرور جعلی توصیه می شود.

ما همچنین در این دوره آموزشی چارچوب طراحی Ant Design را یاد می‌گیریم تا روی React Component Form، Button، Card و Skleton loader با Ant Design کار کنیم.

همیشه می‌توانید با ارائه پیوند git-hub پروژه خود، اگر با مشکلی مواجه شدید، پروژه خود را به اشتراک بگذارید.

تکلیف

اکنون زمان تخصیص است، یک برنامه CRUD کامل با کمک سرور جعلی JSON در react بسازید. در این برنامه، کاربر توانایی ایجاد، خواندن، به روز رسانی و حذف داده ها را خواهد داشت.

برای پیکربندی سرور جعلی JSON در react نیز می‌توانید این پیوند را دنبال کنید.

هنگامی که این پروژه را کامل کردید، می‌توانید تکلیف خود را در اینجا پست کنید https://forms.gle/1DcU73hEKtpPebnm6 با ارائه URL git-hub

سرفصل ها و درس ها

درس ها Lessons

اقدام POST با createAsyncThunk POST action with createAsyncThunk
Redux-Toolkit API را درک کنید Understand Redux-Toolkit API
CreateAsyncThunk را درک کنید Understand createAsyncThunk
Redux Toolkit چیست؟ What is Redux Toolkit ?
اقدام PUT createAsyncThunk را برای به‌روزرسانی ارسال کنید Dispatch PUT createAsyncThunk action to Update
راه اندازی پروژه Project Set-Up
اضافه کردن دکمه ها Adding Buttons
Redux چیست و چرا از آن استفاده می کنیم؟ What is Redux & why we use it ?
ساختار برنامه ما Structuring our App
کار بر روی فرم Working on Form
مقدمه Introduction
کار بر روی ایجاد فرم پست Working on Create Post Form
با createAsyncThunk حذف کنید DELETE with createAsyncThunk
داده های پست را در فرم پر کنید Populate Post Data on Form
ارسال GET createAsyncThunk Action Dispatch GET createAsyncThunk Action
اقدام POST createAsyncThunk را ارسال کنید Dispatch POST createAsyncThunk action
اکشن را با createAsyncThunk قرار دهید PUT action with createAsyncThunk
بسته شدن Wrap up
پیکربندی و نوشتن GET Action با استفاده از createAsyncThunk Configuration & Writing GET Action using createAsyncThunk