What are the main elements of NgRx's architecture?

The main building blocks of NgRx's architecture are the pieces that state management is built from. Each is responsible for its own part:

#Elements

1. Store
   • A large global object that holds the entire application state.
   • Read-only: it cannot be changed directly.
   • Components get data from it through select().
2. Actions
   • Plain objects describing what happened.
   • Examples: loginSuccess, addToCart, loadPosts.
   • Only dispatch() can trigger a state change.
3. Reducers
   • Pure functions that define how the state changes for a given action.
   • They receive the current state and the action → return the new state.
4. Selectors
   • Convenient functions for pulling the parts you need out of the store.
   • For example: selectCurrentUser, selectCartItems.
   • Let you avoid manually reaching into the whole store and take only what you need.
5. Effects
   • Handle side effects: API requests, saving to localStorage, and the like.
   • Listen to actions$, do something, and dispatch new actions based on the result.

Additionally:

6. Entity Adapter
   • Helps you work with collections conveniently: add, update, remove items.
   • Especially useful for lists (for example, products, posts).
7. Feature state
   • Splitting the store by modules.
   • Each module can have its own slice of state.

NgRx is not magic. It is simply a strict sequence: dispatch → effect (if needed) → reducer → new state → the template updates.