Suggest an edit

Improve this article

Refine the answer for “What are the main elements of NgRx's architecture?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts234 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.