Actions and Reducers

Learn about managing state in NgRx applications using actions and reducers.

What are Actions?

Actions describe unique events or actions in your application, such as loading data or user interactions.

Creating Actions

Create actions using createAction():

export const login = createAction('[Login Page] Login');

Action Payloads

Pass data with actions using payload:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducers

Reducers handle state transitions based on actions. They return new states without mutating existing state directly.

Creating Reducers

Use createReducer to define how state changes:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Updating State

Reducers must always return new state objects. Never mutate the existing state directly.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Combining Reducers

Combine multiple reducers into one root reducer for managing complex states:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

Summary

You learned about creating actions and reducers to manage state effectively in Angular with NgRx!