Skip to main content

Як NgRx реалізує патерн Redux?

NgRx реалізує патерн Redux у стилі Angular - з тими самими принципами, але мовою Angular-архітектури.

Ось як це виглядає:

1. Single source of truth (єдине сховище стану)

Увесь стан застосунку зберігається в Store - одному центральному об'єкті. Це як єдиний глобальний state, як у Redux.

2. State лише для читання

Компоненти не можуть напряму змінювати стан. Вони лише надсилають Actions через dispatch() - це як у Redux: тільки через події.

3. Зміни через чисті функції (Reducer)

Reducers приймають поточний стан і Action і повертають новий стан. Це головне правило Redux: чисті функції = передбачуваність.

4. Side effects окремо (Effects)

Усі асинхронні дії (наприклад, запити до API) винесено в Effects. Це як redux-saga або redux-thunk, тільки на RxJS.

5. Селектори (Selectors)

Щоб брати потрібні дані зі store, використовуються selectors. Це як reselect у Redux: продуктивно, зручно, безпечно.

Відмінність?

NgRx побудований на RxJS - усе реактивне. Ти працюєш не зі звичайними функціями, а з потоками (Observables).

Висновок: NgRx - це адаптація Redux-патерна під Angular: чітка структура, реактивність через RxJS і суворий контроль стану.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.