استفاده از ریداکس در اپلیکیشن ری اکت – راهنمای کاربردی

فرض کنید تصمیم گرفته‌اید از ریداکس (Redux) به عنوان کتابخانه مدیریت حالت استفاده کنید. باور کنید یا نه این بخش یعنی تصمیم‌گیری در مورد کتابخانه‌ای که باید استفاده شود، سخت‌ترین بخش کار است. بقیه مراحل آسان و سریع هستند. در این راهنما با ما همراه باشید تا در عرض چند دقیقه با استفاده از ریداکس در اپلیکیشن ری اکت یک نرم‌افزار ToDo بسازیم.

معرفی ریداکس

ریداکس سه کامپوننت عمده به نام‌های store ،reducer و actions دارد. بر اساس مستندات ریداکس:

• کامپوننت Store «حالت» (State) (درخت حالت) اپلیکیشن را نگهداری می‌کند. تنها روش برای تغییر حالت درون آن، این است که یک اکشن را به آن ارسال (Dispatch) کنید.
• کامپوننت Actions در واقع payload اطلاعاتی است که داده‌ها را از اپلیکیشن به استور ارسال می‌کنند. اکشن‌ها تنها منبع اطلاعات برای استور محسوب می‌شوند.

ما دو اکشن تعریف می‌کنیم که createItem و deleteItem هستند.

• «ردیوسرها» (Reducers) نیز شیوه مدیریت حالت از سوی اپلیکیشن را در پاسخ به اکشن‌های ارسال شده به استور تعیین می‌کنند. به خاطر داشته باشید که اکشن‌ها صرفاً آن چه رخ داده را توصیف می‌کنند، اما چگونگی تغییر یافتن حالت اپلیکیشن را توضیح نمی‌دهند.

یک ردیوسر در فرایندی شبیه به ایجاد یک جدول در پایگاه داده SQL ایجاد می‌شود. شیوه ساختن آن، بسته به نوع اپلیکیشن متفاوت خواهد بود.

راهنمای عملی

در این بخش مراحل راهنمای عملی ساخت اپلیکیشن ToDo و استفاده از ریداکس را توضیح می‌دهیم.

گام 1

با استفاده از اسکریپت create-react-app یک اپلیکیشن جدید ری‌اکت بسازید:

create-react-app todo-app

گام 2

وابستگی‌ها را با دستور زیر نصب کنید:

npm install lodash @material-ui/core @material-ui/icons react-redux redux redux-logger

گام 3

اگر می‌خواهید روشی مؤثر برای ذخیره فایل‌ها بیابید، از ساختار فایل ducks بهره بگیرید. اما در این راهنما به منظور سادگی از ساختار فایل ساده‌ای استفاده می‌کنیم.

پوشه جدیدی به نام modules ایجاد کنید. سپس سه فایل به نام‌های action.js، reducer.js و store.js در این پوشه بسازید. Actions اشیای ساده‌ای با یک خصوصیت الزامی به نام type هستند. اکشن‌ها را از کامپوننت Dispatch می‌کنیم تا داده‌ها به حالت استور ارسال شوند:

فایل Actions.js

روش بهینه این است که یک فایل دیگر برای نوع اکشن‌ها ایجاد کنید. به این منظور فایل reducer.js را ساخته و محتوای زیر را به آن اضافه می‌کنیم:

فایل store.js نیز کدهایی به شکل زیر دارد:

گام 4

فایل جدیدی به نام todo.js در پوشه جدیدی به نام pages درون پوشه src بسازید. این فایل شامل کامپوننت لیست ToDo خواهد بود. در این مثال روی ریداکس متمرکز شده‌ایم، بنابراین تلاش نمی‌کنیم که کامپوننت/کانتینر ایجاد کنیم. کل اپلیکیشن ما درون همین تک فایل قرار خواهد داشت. UI را با یک فرم و یک لیست برای نمایش وظیفه‌ها ایجاد می‌کنیم.

فایل todo.js

گام 5

اینک زمان آن رسیده است که کامپوننت todo را به استور ریداکس وصل کنیم. به این منظور فایل App.js را باز کنید و ارائه‌دهنده ریداکس را اضافه کنید تا همه فرزندان بتوانند به استور دسترسی داشته باشند:

درون فایل todo.js آن را با استفاده از کامپوننت connect از react-redux به استور وصل کنید. این موارد را به انتهای فایل todo.js اضافه کنید. اکنون آیتم‌های استور در props کامپوننت نیز در دسترس هستند. ضمناً دو تابع (اکشن) دیگر نیز در props موجود خواهند بود.

در نهایت createItem و deleteItem را به ترتیب درون handleSubmit و handleDelete فراخوانی می‌کنیم:

سخن پایانی

اگر می‌خواهید کل کد اپلیکیشنی که در این راهنما ساختیم را بررسی کنید، می‌توانید به این ریپازیتوری گیت‌هاب (+) مراجعه کنید. تجربیات خود را در مورد روش استفاده از ریداکس در اپلیکیشن ری‌اکت در بخش نظرات این نوشته با ما و دیگر خوانندگان فرادرس در میان بگذارید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
•  آموزش جاوا اسکریپت (JavaScript)
• ساخت کتابخانه React و انتشار آن در NPM — راهنمای گام به گام
• طراحی احراز هویت مقدماتی با React — به زبان ساده

==