آموزش React، React Redux و Redux Saga - Master React State/Hoks

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

راه اندازی برنامه React ما Initialising our React App

• برنامه react ما را ایجاد کنید Create our react app

• وارد کردن SemanticUI برای زیبا کردن برنامه ما Importing SemanticUI to make our application pretty(er)

راه اندازی برنامه React ما Initialising our React App

• برنامه react ما را ایجاد کنید Create our react app

• وارد کردن SemanticUI برای زیبا کردن برنامه ما Importing SemanticUI to make our application pretty(er)

ایجاد برنامه react ما Creating our react app

• اضافه کردن درآمد و هزینه Adding Income and Expenses.

• اضافه کردن درآمد و هزینه Adding Income and Expenses.

• ایجاد تاریخچه درآمد و هزینه ما Creating our income and expense history

• تراکنش ها را اضافه کنید Add transactions

• تراکنش ها را اضافه کنید Add transactions

• تراکنش ها را اضافه کنید Add transactions

ایجاد برنامه react ما Creating our react app

• ایجاد تاریخچه درآمد و هزینه ما Creating our income and expense history

• تراکنش ها را اضافه کنید Add transactions

ایجاد کامپوننت برای برنامه react ما Creating components for our react app

• ایجاد کامپوننت MainHeader Creating a MainHeader component

• ButtonSaveOrCancel React Component را ایجاد کنید Create our ButtonSaveOrCancel React Component

• ایجاد کامپوننت NewEntryForm React ما Creating our NewEntryForm React Component

• Refactoring DisplayBalance React Component Refactoring our DisplayBalance React Component

• ایجاد مؤلفه React Display Balances ما Creating our DisplayBalances React Component

• ایجاد کامپوننت EntryLine React ما Creating our EntryLine React Component

ایجاد کامپوننت برای برنامه react ما Creating components for our react app

• ایجاد کامپوننت MainHeader Creating a MainHeader component

• ButtonSaveOrCancel React Component را ایجاد کنید Create our ButtonSaveOrCancel React Component

• ایجاد کامپوننت NewEntryForm React ما Creating our NewEntryForm React Component

• Refactoring DisplayBalance React Component Refactoring our DisplayBalance React Component

• ایجاد مؤلفه React Display Balances ما Creating our DisplayBalances React Component

• ایجاد کامپوننت EntryLine React ما Creating our EntryLine React Component

قلاب، حالت و لوازم Hooks, State and Props

• اضافه کردن قلاب و حالت Adding Hooks and State

• اضافه کردن قلاب و حالت Adding Hooks and State

• فشار دادن تغییرات به GitHub Pushing changes to GitHub

• فشار دادن تغییرات به GitHub Pushing changes to GitHub

• ایجاد حالت با استفاده از useState Creating State using useState

• ایجاد حالت با استفاده از useState Creating State using useState

• نگاشت آرایه ای از اشیاء Mapping a array of objects.

• نگاشت آرایه ای از اشیاء Mapping a array of objects.

• ایجاد کامپوننتی که چندین مؤلفه را رندر می کند Creating a component that renders multiple components

• ایجاد کامپوننتی که چندین مؤلفه را رندر می کند Creating a component that renders multiple components

• افزودن کلید به اجزای تکراری Adding keys to the repeated components

• افزودن کلید به اجزای تکراری Adding keys to the repeated components

• اضافه کردن تابع DeleteEntry Adding a DeleteEntry function

• افزودن یک ورودی جدید Adding a new Entry

• اضافه کردن یک ضامن برای شناسایی نوع ورودی Adding a toggle to identify the type of entry

• اضافه کردن یک ضامن برای شناسایی نوع ورودی Adding a toggle to identify the type of entry

• ایجاد یک مدل برای ویرایش ورودی ها Creating a model to edit the entries

• قالب بندی مدال ما Formatting our modal

• قالب بندی مدال ما Formatting our modal

• استفاده مجدد از اجزای ما Making our components more reusable

• استفاده مجدد از اجزای ما Making our components more reusable

• بازسازی برای مدیریت دولت Refactoring to manage the state

• بازسازی برای مدیریت دولت Refactoring to manage the state

• حالت Refactoring بیشتر More Refactoring state

• ساخت مودال با useEffect Making the modal work with useEffect

• تنظیمات نهایی را انجام دادیم Final adjustments to state and we done

• تنظیمات نهایی را انجام دادیم Final adjustments to state and we done

• محاسبه مجموع با استفاده از useEffect Calculating the totals using useEffect

• محاسبه مجموع با استفاده از useEffect Calculating the totals using useEffect

• در حال نمایش مجموع ها، آیا می توانیم اکنون کمی Redux انجام دهیم؟ Displaying totals, can we do some Redux now?

• در حال نمایش مجموع ها، آیا می توانیم اکنون کمی Redux انجام دهیم؟ Displaying totals, can we do some Redux now?

قلاب، حالت و لوازم Hooks, State and Props

• اضافه کردن تابع DeleteEntry Adding a DeleteEntry function

• افزودن یک ورودی جدید Adding a new Entry

• ایجاد یک مدل برای ویرایش ورودی ها Creating a model to edit the entries

• حالت Refactoring بیشتر More Refactoring state

• ساخت مودال با useEffect Making the modal work with useEffect

Redux - فروشگاه، ارسال، اقدامات و کاهش دهنده ها Redux - Store, Dispatch, Actions and Reducers

• رفع اخطار و انجام تمام تغییرات حالت Fixing warning and committing all the state changes

• فروشگاه Redux را ایجاد کنید Create Redux Store

• فروشگاه Redux را ایجاد کنید Create Redux Store

• ارسال اقدامات با Redux Dispatching actions with Redux

• ارسال اقدامات با Redux Dispatching actions with Redux

• ارسال با محموله با Redux Dispatch with payload with Redux

• ارسال با محموله با Redux Dispatch with payload with Redux

• رفع کد و اشتراک در تمام تغییرات فروشگاه در Redux Fixing the code and Subscribing to all store changes in Redux

• رفع کد و اشتراک در تمام تغییرات فروشگاه در Redux Fixing the code and Subscribing to all store changes in Redux

• ایجاد یک اکشن جدید Redux Creating a new Redux Action

• ایجاد یک اکشن جدید Redux Creating a new Redux Action

• ایجاد توابع اکشن برای Redux Creating Action Functions for Redux

• ایجاد یک کاهش Creating a Reduce

• کاهنده های Redux را در یک فروشگاه ترکیب کنید Combine Redux reducers in one store

• کاهنده های Redux را در یک فروشگاه ترکیب کنید Combine Redux reducers in one store

• Refactoring Redux ما به Actions، Reducer و Store Refactoring our Redux to Actions, Reducers and Store

Redux - فروشگاه، ارسال، اقدامات و کاهش دهنده ها Redux - Store, Dispatch, Actions and Reducers

• رفع اخطار و انجام تمام تغییرات حالت Fixing warning and committing all the state changes

• ایجاد توابع اکشن برای Redux Creating Action Functions for Redux

• ایجاد یک کاهش Creating a Reduce

• Refactoring Redux ما به Actions، Reducer و Store Refactoring our Redux to Actions, Reducers and Store

React-Redux React-Redux

• React Redux با ترکیب Redux ما با اجزای React ما React Redux combining our Redux with our React components

• React Redux Hook useDispatch React Redux Hook useDispatch

• افزودن ورودی جدید با React Redux Hooks Adding a new entry with React Redux Hooks

• افزودن ورودی جدید با React Redux Hooks Adding a new entry with React Redux Hooks

• استفاده از UUID برای شناسه ورودی Using UUIDs for the entry ID

• نصب و پیکربندی Redux Dev Tools Installing and Configuring Redux Dev Tools

React-Redux React-Redux

• React Redux با ترکیب Redux ما با اجزای React ما React Redux combining our Redux with our React components

• React Redux Hook useDispatch React Redux Hook useDispatch

• استفاده از UUID برای شناسه ورودی Using UUIDs for the entry ID

React Redux Devtools React Redux Devtools

• نصب و پیکربندی Redux Dev Tools Installing and Configuring Redux Dev Tools

• نصب و پیکربندی Redux Dev Tools Installing and Configuring Redux Dev Tools

• ایجاد اولین قلاب سفارشی useEntryDetails Creating our first custom hook useEntryDetails

• اقدام جدید Redux و ورودی جدید به‌روزرسانی Redux Reducer New Redux action and new Redux Reducer update entry

• اقدام جدید Redux و ورودی جدید به‌روزرسانی Redux Reducer New Redux action and new Redux Reducer update entry

• ایجاد یک فروشگاه Redux جدید (و اکشن و کاهش دهنده) Creating a new Redux Store (and action and reducer)

• ایجاد یک فروشگاه Redux جدید (و اکشن و کاهش دهنده) Creating a new Redux Store (and action and reducer)

• ارسال اقدامات جدید به فروشگاه جدید Redux Dispatching new actions to the new Redux Store

• ارسال اقدامات جدید به فروشگاه جدید Redux Dispatching new actions to the new Redux Store

• بعد از ارسال مودال را باز کنید Open the modal after the dispatch

• بعد از ارسال مودال را باز کنید Open the modal after the dispatch

• بستن مودال در هنگام اعزام Closing the modal on dispatch

• بستن مودال در هنگام اعزام Closing the modal on dispatch

• بارگیری داده های مودال Loading the modal data

• ساخت قلاب سفارشی ما حتی بهتر Making our custom hook even better

• افزودن ارسال به روز رسانی به هوک سفارشی ما Adding an update dispatch to our custom hook

• افزودن ارسال به روز رسانی به هوک سفارشی ما Adding an update dispatch to our custom hook

• شلیک 2 اعزام به طور همزمان Firing 2 dispatches at once

• شلیک 2 اعزام به طور همزمان Firing 2 dispatches at once

• تمیز کردن قلاب سفارشی برای استفاده آسان Cleaning up the custom hook for easy use

• تمیز کردن قلاب سفارشی برای استفاده آسان Cleaning up the custom hook for easy use

React Redux Devtools React Redux Devtools

• نصب و پیکربندی Redux Dev Tools Installing and Configuring Redux Dev Tools

• ایجاد اولین قلاب سفارشی useEntryDetails Creating our first custom hook useEntryDetails

• بارگیری داده های مودال Loading the modal data

• ساخت قلاب سفارشی ما حتی بهتر Making our custom hook even better

ایجاد "API Backend" ما با استفاده از json-server Creating our "Backend API" using json-server

• در حال نصب json-server Installing json-server

• در حال نصب json-server Installing json-server

• درک باطن سرور json Understanding the json-server backend

ایجاد "API Backend" ما با استفاده از json-server Creating our "Backend API" using json-server

• درک باطن سرور json Understanding the json-server backend

افزودن Saga به پروژه ما Adding Saga to our project

• نصب میان افزار redux-saga Installing redux-saga middleware

• ایجاد و اجرای اولین حماسه ما Creating and running our first saga

افزودن Saga به پروژه ما Adding Saga to our project

• نصب میان افزار redux-saga Installing redux-saga middleware

• ایجاد و اجرای اولین حماسه ما Creating and running our first saga

درک توابع ژنراتور و بازده Understanding Generator Functions and Yield Returns

• مقدمه ای بر توابع ژنراتور و بازده Introduction to Generator Functions and Yield Returns

• مقدمه ای بر توابع ژنراتور و بازده Introduction to Generator Functions and Yield Returns

• درک مولدهای تابع "بی نهایت". Understanding "infinity" function generators

• درک مولدهای تابع "بی نهایت". Understanding "infinity" function generators

• رانندگی نقطه به خانه، توابع ژنراتور و بازده برمی گردد Driving the point home, Generator functions and Yield returns

• رانندگی نقطه به خانه، توابع ژنراتور و بازده برمی گردد Driving the point home, Generator functions and Yield returns

درک توابع ژنراتور و بازده Understanding Generator Functions and Yield Returns

درک جلوه های اصلی ساگا Understanding the main Saga Effects

• درک Saga Effect Take Understanding Saga Effect Take

• ایجاد یک تابع برای شروع خودکار تمام Sagas Creating a function to automatically start all Sagas

• ایجاد یک تابع برای شروع خودکار تمام Sagas Creating a function to automatically start all Sagas

• درک Saga Effect PUT Understanding Saga Effect PUT

• درک Saga Effect CALL Understanding Saga Effect CALL

• درک Saga Effect CALL Understanding Saga Effect CALL

درک جلوه های اصلی ساگا Understanding the main Saga Effects

• درک Saga Effect Take Understanding Saga Effect Take

• درک Saga Effect PUT Understanding Saga Effect PUT

استفاده از Redux Saga در پروژه ما Using Redux Saga to our project

• پاک کردن راه برای حماسه ها Cleaning up the way for sagas

• حذف داده های اولیه از کاهنده و واکشی آن از باطن Removing the initial data from the reducer and fetching it from the backend

• حذف داده های اولیه از کاهنده و واکشی آن از باطن Removing the initial data from the reducer and fetching it from the backend

• ایجاد بخشی از اولین حماسه واقعی ما با استفاده از Take Creating part of our first real Saga using Take

• پرس و جو داده ها از حماسه ما با استفاده از CALL Querying data from our saga using CALL

• افزودن داده به UI با استفاده از PUT Adding data to the UI using PUT

استفاده از Redux Saga در پروژه ما Using Redux Saga to our project

• پاک کردن راه برای حماسه ها Cleaning up the way for sagas

• ایجاد بخشی از اولین حماسه واقعی ما با استفاده از Take Creating part of our first real Saga using Take

• پرس و جو داده ها از حماسه ما با استفاده از CALL Querying data from our saga using CALL

• افزودن داده به UI با استفاده از PUT Adding data to the UI using PUT

یادگیری حتی بیشتر افکت های Saga Learning even more Saga Effects

• یکی دیگر از Saga Effect FORK را درک کنید Understand another Saga Effect FORK

• یکی دیگر از Saga Effect FORK را درک کنید Understand another Saga Effect FORK

• تقسیم کردن Backend ما برای داشتن دو نقطه پایانی برای استفاده با Fork Splitting our Backend to have two endpoints to use with Fork

یادگیری حتی بیشتر افکت های Saga Learning even more Saga Effects

• تقسیم کردن Backend ما برای داشتن دو نقطه پایانی برای استفاده با Fork Splitting our Backend to have two endpoints to use with Fork

افکت های جدید Saga را در برنامه ما پیاده سازی کنید Implement the new Saga effects on our application

• پیاده سازی Saga Effect FORK در برنامه ما Implementing Saga Effect FORK in our app

• دریافت همه جزئیات ورودی به طور همزمان و به روز رسانی UI به محض ورود Getting all the entry details at the same time and update the UI as it arrives

• دریافت همه جزئیات ورودی به طور همزمان و به روز رسانی UI به محض ورود Getting all the entry details at the same time and update the UI as it arrives

افکت های جدید Saga را در برنامه ما پیاده سازی کنید Implement the new Saga effects on our application

• پیاده سازی Saga Effect FORK در برنامه ما Implementing Saga Effect FORK in our app

جلوه های پیشرفته Redux Saga Advanced Redux Saga Effects

• پاک کردن کد قبل از چالش های پیشرفته تر Cleaning up the code before the more advanced challenges

• پاک کردن کد قبل از چالش های پیشرفته تر Cleaning up the code before the more advanced challenges

• Redux Saga Advanced Effect - TAKEEVERY Redux Saga Advanced Effect - TAKEEVERY

• Redux Saga Advanced Effect - TAKEEVERY Redux Saga Advanced Effect - TAKEEVERY

• Saga Advanced Effects CANCEL و CANCELED Saga Advanced Effects CANCEL and CANCELLED

• Saga Advanced Effects TAKELATEST Saga Advanced Effects TAKELATEST

• Saga Advanced Effects TAKELATEST Saga Advanced Effects TAKELATEST

• پاک کردن کد قبل از افزودن Advanced Saga Effects جدید Cleaning up the code before add the new Advanced Saga Effects

• حذف یک مورد (راه طولانی) Deleting an Item (the long way)

• حذف یک مورد (راه طولانی) Deleting an Item (the long way)

• بررسی حماسه مسدود کردن Reviewing the Blocking Saga

• وارد کردن حماسه Add Entries ما به Saga Initializer ما Importing our Add Entries Saga to our Saga Initializer

• وارد کردن حماسه Add Entries ما به Saga Initializer ما Importing our Add Entries Saga to our Saga Initializer

• افزودن TakeLatest به برنامه ما Adding TakeLatest to our application

• به روز رسانی UI با استفاده از PUT با TakeLatest Updating the UI using PUT with TakeLatest

جلوه های پیشرفته Redux Saga Advanced Redux Saga Effects

• Saga Advanced Effects CANCEL و CANCELED Saga Advanced Effects CANCEL and CANCELLED

• پاک کردن کد قبل از افزودن Advanced Saga Effects جدید Cleaning up the code before add the new Advanced Saga Effects

• بررسی حماسه مسدود کردن Reviewing the Blocking Saga

• افزودن TakeLatest به برنامه ما Adding TakeLatest to our application

• به روز رسانی UI با استفاده از PUT با TakeLatest Updating the UI using PUT with TakeLatest