Store Setup & Actions

## What an NgRx action is An **action** in NgRx is a plain JavaScript object with one required property, `type`, a string that names an event. Anything else on the object is **payload**: extra data the rest of the store needs to handle the event. In a bookstore catalogue, `{ type: '[Catalogue Page] Genre Changed', genre: 'poetry' }` says that the catalogue page reported a new genre choice. Actions are how a component asks the global `Store` for a state change. A component never writes state directly; it reports what happened and lets the store's other parts react. The `type` string follows NgRx's `[Source] Event` convention: the bracketed part names **where** the action came from (a page, an API, a browser API), and the rest names **what happened**. ## Declaring an action creator with `createAction` Nobody writes the object literal by hand. `createAction` from `@ngrx/store` returns an **action creator**: a function that builds the object with the right `type` every time, and gives TypeScript the payload's shape. `createAction` has three forms: | Form | Example | Call site | |---|---|---| | no payload | `createAction('[Catalogue Page] Opened')` | `cataloguePageOpened()` | | typed props | `createAction('[Catalogue Page] Genre Changed', props<{ genre: string }>())` | `genreChanged({ genre: 'poetry' })` | | creator function | `createAction('[Catalogue Page] Wishlist Toggled', (bookId: string) => ({ bookId }))` | `wishlistToggled('b-42')` | The creator also carries its type as a read-only `type` property, so `genreChanged.type` is the string `'[Catalogue Page] Genre Changed'`. Reducers and effects use the creator itself to say which action they handle. The `props<T>()` helper has guard rails in its typings. NgRx rejects props that are: - an **array** (`props<string[]>()`), - a **primitive** (`props<string>()`), - an **empty object** (`props<{}>()`), - an object with its own **`type`** property, which would clash with the action's type. ## Dispatching from a component A component injects `Store` and calls `dispatch` with the object the creator returns: ```ts import { Component, OnInit, inject } from '@angular/core'; import { Store, createAction, props } from '@ngrx/store'; export const cataloguePageOpened = createAction('[Catalogue Page] Opened'); export const genreChanged = createAction( '[Catalogue Page] Genre Changed', props<{ genre: string }>() ); @Component({ selector: 'app-catalogue', template: '' }) export class CatalogueComponent implements OnInit { private readonly store = inject(Store); ngOnInit(): void { this.store.dispatch(cataloguePageOpened()); } onGenreChange(genre: string): void { this.store.dispatch(genreChanged({ genre })); } } ``` `dispatch` with an action object returns `void`. The component does not get the new state back from the call; it reads state through selectors, and any follow-up work (loading the books for that genre) belongs to effects. ## What happens after `dispatch` 1. The action goes onto the store's actions stream. 2. Every registered reducer receives it and returns the next state for its slice. Most ignore it. 3. Effects that listen for its type run their side effects and may dispatch further actions. 4. Selectors built on the changed slices emit, and the views that read them update. Steps 2 to 4 are the subject of reducers, effects and selectors. The point here is that **one action goes to all of them**; the action does not name a handler. ## Mistakes that show up in interviews - **Passing the creator instead of calling it.** `store.dispatch(cataloguePageOpened)` does not compile: `dispatch`'s typings reject an action creator with the message "Action creator is not allowed to be dispatched. Did you forget to call it?". - **Treating an action as a method call.** `setBooks` or `loadBooksNow` reads like a command. NgRx's guidance is to capture events, such as `[Catalogue Page] Opened`, and let the store decide what they mean. - **Expecting a return value.** `dispatch` does not return a Promise or the new state, so `await store.dispatch(...)` waits for nothing. - **Hand-written object literals.** They skip the type-checked payload and invite typos in the `type` string. ## Choosing the source and the event text The bracketed source should name the **place** the event came from, not the feature it affects. For the bookstore: - `[Catalogue Page] Opened` and `[Catalogue Page] Genre Changed` come from the page component; - `[Books API] Books Loaded Success` comes from the code that talks to the server; - `[Wishlist Button] Book Added` comes from a reusable button that may sit on several pages. The event text is written in the past tense or as a plain description of what the user or system did. A reader scanning the DevTools log should be able to reconstruct the session from the types alone. With these rules in mind, an action is simply a typed, named report of an event, built by a creator and handed to `Store.dispatch`.