Skip to main content

How does NgRx implement the Redux pattern?

NgRx implements the Redux pattern in Angular style, with the same principles but expressed in the language of Angular's architecture.

Here's what that looks like:

1. Single source of truth (a single state store)

The entire application state is stored in Store, a single central object. This is like one global state, just like in Redux.

2. State is read-only

Components cannot change the state directly. They only dispatch Actions through dispatch(), just like in Redux: only through events.

3. Changes through pure functions (Reducer)

Reducers take the current state and an Action, and return a new state. This is the main rule of Redux: pure functions = predictability.

4. Side effects separately (Effects)

All asynchronous actions (for example, API requests) are moved into Effects. This is like redux-saga or redux-thunk, just built on RxJS.

5. Selectors (Selectors)

To read the data you need from the store, you use selectors. This is like reselect in Redux: performant, convenient, safe.

The difference?

NgRx is built on RxJS, everything is reactive. You work not with plain functions but with streams (Observables).

Conclusion: NgRx is an adaptation of the Redux pattern for Angular: a clear structure, reactivity through RxJS, and strict control over state.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.