NgRx با ارائه یک معماری قابل پیش‌بینی و قابل نگهداری برای مدیریت State، به شما کمک می‌کند تا:

• پیچیدگی برنامه‌های Angular خود را کاهش دهید.
• قابلیت تست کد خود را بهبود بخشید.
• عملکرد برنامه خود را بهینه‌سازی کنید.
• یک منبع واحد حقیقت (Single Source of Truth) برای داده‌های خود ایجاد کنید.

این دوره به شما نشان می‌دهد که چگونه از این مزایا بهره‌مند شوید و برنامه‌های Angular مقیاس‌پذیر و قابل نگهداری بسازید.

این دوره جامع، تمام جنبه‌های NgRx و NgRx Data را پوشش می‌دهد. شما خواهید آموخت:

• مفاهیم پایه Redux و NgRx.
• نحوه ایجاد و استفاده از Store، Actions، Reducers و Selectors.
• چگونگی مدیریت Side Effects با استفاده از Effects.
• نحوه استفاده از NgRx Data برای ساده‌سازی کار با API و داده‌ها.
• بهترین روش‌ها برای ساخت برنامه‌های Angular با NgRx.
• رفع اشکال و تست برنامه‌های NgRx.
• الگوهای پیشرفته NgRx برای حل مسائل پیچیده.

با گذراندن این دوره، شما قادر خواهید بود تا از NgRx در پروژه‌های واقعی استفاده کنید و به یک متخصص در این زمینه تبدیل شوید.

برای بهره‌مندی کامل از این دوره، شما باید:

• دانش پایه‌ای از HTML، CSS و JavaScript داشته باشید.
• با مفاهیم Angular مانند Components، Services و Modules آشنا باشید.
• تجربه‌ای در توسعه برنامه‌های Angular داشته باشید.

اگر با TypeScript نیز آشنایی داشته باشید، یادگیری NgRx برای شما آسان‌تر خواهد بود.

این دوره به چندین بخش تقسیم شده است که هر کدام به یک جنبه خاص از NgRx می‌پردازند:

1. مقدمه ای بر NgRx و Redux

در این بخش، با مفاهیم کلیدی Redux و NgRx آشنا می‌شوید و نحوه عملکرد آن‌ها را درک می‌کنید. این بخش شامل توضیحاتی درباره‌ی Store، Actions، Reducers و Selectors است.

2. ایجاد Store، Actions و Reducers

در این بخش، به صورت عملی یاد می‌گیرید که چگونه یک Store ایجاد کنید، Actions را تعریف کنید و Reducers را برای به‌روزرسانی State بنویسید. این بخش شامل مثال‌های کد فراوان است.

3. مدیریت Side Effects با Effects

در این بخش، با Effects آشنا می‌شوید و یاد می‌گیرید که چگونه از آن‌ها برای مدیریت Side Effects مانند فراخوانی API، ذخیره‌سازی داده‌ها و ارسال پیام استفاده کنید. این بخش شامل مثال‌های عملی برای مدیریت سناریوهای مختلف است.

4. معرفی NgRx Data

در این بخش، با NgRx Data آشنا می‌شوید و یاد می‌گیرید که چگونه از آن برای ساده‌سازی کار با API و داده‌ها استفاده کنید. NgRx Data به شما کمک می‌کند تا کد کمتری بنویسید و برنامه‌های قابل نگهداری‌تری بسازید.

5. الگوهای پیشرفته NgRx

در این بخش، الگوهای پیشرفته NgRx را برای حل مسائل پیچیده یاد می‌گیرید. این بخش شامل مواردی مانند استفاده از EntityState، Selectors ترکیبی و مدیریت Error Handling است.

6. تست و رفع اشکال NgRx

در این بخش، یاد می‌گیرید که چگونه برنامه‌های NgRx خود را تست کنید و اشکالات را برطرف کنید. این بخش شامل استفاده از ابزارهای مختلف تست و رفع اشکال است.

7. پروژه عملی: ساخت یک برنامه کامل با NgRx

در این بخش، با استفاده از تمام آموخته‌های خود، یک برنامه کامل را با NgRx می‌سازید. این پروژه عملی به شما کمک می‌کند تا مهارت‌های خود را در عمل به کار بگیرید و برای پروژه‌های واقعی آماده شوید.

بیایید یک مثال ساده از نحوه به‌روزرسانی State با استفاده از Action و Reducer را بررسی کنیم:

Action:

    export const increment = createAction('[Counter Component] Increment');
    

Reducer:

    import { createReducer, on } from '@ngrx/store';
    import { increment } from './counter.actions';

    export const initialState = 0;

    const _counterReducer = createReducer(
      initialState,
      on(increment, (state) => state + 1)
    );

    export function counterReducer(state, action) {
      return _counterReducer(state, action);
    }
    

در این مثال، یک Action به نام increment تعریف کرده‌ایم که نشان‌دهنده افزایش مقدار counter است. سپس یک Reducer تعریف کرده‌ایم که به این Action گوش می‌دهد و State را با اضافه کردن ۱ به مقدار فعلی، به‌روزرسانی می‌کند.

• Immutable State: State در NgRx باید Immutable باشد. به این معنی که شما نباید State را مستقیماً تغییر دهید، بلکه باید یک کپی جدید از State را با تغییرات مورد نظر ایجاد کنید.
• Single Source of Truth: Store در NgRx باید تنها منبع حقیقت برای داده‌های شما باشد. این به شما کمک می‌کند تا از بروز ناهماهنگی در داده‌ها جلوگیری کنید.
• Side Effects: Effects برای مدیریت Side Effects مانند فراخوانی API و ذخیره‌سازی داده‌ها استفاده می‌شوند. آن‌ها باید به صورت جداگانه از Reducers مدیریت شوند.
• NgRx Data: NgRx Data به شما کمک می‌کند تا کار با API و داده‌ها را ساده‌تر کنید و کد کمتری بنویسید.