استفاده از Flux در ReactJS – آموزش ReactJS

  • سه شنبه ۲۱ اسفند ۱۳۹۷
  • بازدید ۴۳ نفر

reactjs using flux 6191 تصویر

استفاده از Flux در ReactJS

در این بخش چگونگی پیاده سازی و استفاده از الگوی Flux در برنامه های ReactJS را بررسی خواهیم کرد. ما از Redux استفاده می کنیم. هدف از ایجاد این بخش، ارائه ساده ترین مثال ها برای هر قطعه مورد نیاز به منظور اتصال Redux و React است.

مرحله اول: نصب Redux

در این مرحله ما Redux را با استفاده از دستور زیر و خط فرمان نصب می کنیم.

مرحله دوم : ایجاد فایل ها و پوشه ها

در این مرحله ما پوشه ها و فایل های مورد نیاز برای action ها، reducer ها و کامپوننت های خود را ایجاد می کنیم.

 بعد از انجام این کار ساختار پوشه مانند نمونه زیر خواهد بود:

react redux folder structure 6191 تصویر

مرحله سوم : Action ها

Action ها شیء های جاوا اسکریپت هستند که از پراپرتی type به منظور اطلاع دادن در مورد داده هایی که باید به Store ارسال شود، استفاده می کنند. ما اکشن ADD_TODO را برای اضافه کردن آیتم جدید به لیست خود تعریف کرده ایم. تابع addTodo یک سازنده action است که به عنوان خروجی یک نوع از action باز می گرداند و برای هر آیتم تولید شده یک شناسه تنظیم می کند.

محتوای فایل actions/actions.js:

مرحله چهارم : Reducer ها

در حالی که action ها فقط باعث تغییر در برنامه می شوند، reducer ها این Action ها را مشخص می کنند. ما برای جستجوی یک اکشن ADD_TODO از دستور switch استفاده می کنیم. Reducer تابعی است که دو پارامتر (state و action) برای محاسبه را می گیرد و یک state به روز رسانی شده باز می گرداند.

تابع اول به منظور ایجاد یک آیتم جدید استفاده می شود در حالی که تابع دوم برای اضافه کردن آن آینم به لیست استفاده می شود. در نهایت ما از یک تابعی کمکی به نام combineReducers برای اضافه کردن reducer های جدیدی که ممکن است در آینده لازم شوند، استفاده می کنیم.

محتوای فایل reducers/reducers.js:

مرحله پنجم : Store

Store محلی است که state برنامه در آن نگه داری می شود. زمانی که شما reducer ها را داشته باشید، ایجاد store بسیار راحت است.

محتوای فایل main.js:

مرحله ششم : کامپوننت ریشه (root)

کامپوننت App به عنوان کامپوننت root برنامه در نظر گرفته میشود و فقط این کامپوننت باید از وضعیت redux آگاه باشد. بخش مهمی که باید به آن توجه کنید، تابع connect است که به منظور اتصال کامپوننت ریشه App به Store استفاده می شود.

تابع connect تابع select را به عنوان آرگومان می گیرد. خود تابع select به عنوان آرگومان state را از Store میگرد و پراپرتی (visibleTodos) را باز می گرداند که می تواینم از آن در کامپوننت خودمان استفاده کنیم.

محتوای فایل App.jsx:

مرحله هفتم : کامپوننت های دیگر

سایر کامپوننت ها نباید از وضعیت redux آگاهی داشته باشند.

محتوای فایل components/AddTodo.js:

محتوای فایل components/Todo.js:

محتوای فایل components/TodoList.js:

 

react redux example 6191 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است