NGRX Store Angular Tutorial

NgRx Store is a state management solution designed for Angular applications, following the Redux pattern. It helps in managing the state of the app in a single, immutable data structure that acts as a single source of truth. With the continuous evolution of Angular, including its latest versions such as Angular 17, NgRx Store has also been updated to ensure compatibility and to leverage new Angular features for optimal performance and developer experience.

To integrate NgRx Store into an Angular 17 application, you typically go through the following steps:

1. Install NgRx Store

First, you need to add NgRx Store to your Angular project. This is done via npm or yarn. Open your terminal and navigate to your project directory to run the following command:

npm install @ngrx/store --save

or if you’re using yarn:

yarn add @ngrx/store

2. Setup and Configure the Store Module

After installing, you need to set up and configure the Store module in your application. This involves importing StoreModule from @ngrx/store in your AppModule (or a feature module) and calling the .forRoot() method if it’s in the AppModule or .forFeature() for a feature module, passing in your app’s reducers.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers'; // assuming you have defined your reducers

@NgModule({
  declarations: [
    // your components here
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, { metaReducers })
  ],
  providers: [],
  bootstrap: [/* your bootstrap component */]
})
export class AppModule { }

3. Define State, Actions, and Reducers

With NgRx, you manage the state by defining actions and reducers. Actions describe the type of operation that can be performed on the state, while reducers specify how the state changes in response to actions.

actions.ts:

import { createAction } from '@ngrx/store';

export const myAction = createAction('[My Component] My Action');

reducers.ts:

import { createReducer, on } from '@ngrx/store';
import * as MyActions from './actions';

export const initialState = 0;

const _myReducer = createReducer(initialState,
  on(MyActions.myAction, state => state + 1),
);

export function myReducer(state, action) {
  return _myReducer(state, action);
}

4. Using Store in Components

To use the store in your components, inject the Store service provided by @ngrx/store and use it to dispatch actions or select pieces of the state.

my.component.ts:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { myAction } from './actions';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent {

  constructor(private store: Store) {}

  performAction() {
    this.store.dispatch(myAction());
  }
}

5. Debugging and Tooling

NgRx provides powerful tooling and debugging capabilities, especially when used with the Redux DevTools extension for browsers. To integrate Redux DevTools with NgRx, you can install @ngrx/store-devtools and import StoreDevtoolsModule in your AppModule.

npm install @ngrx/store-devtools --save

Then, in your AppModule:

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment'; // Angular CLI environment

@NgModule({
  // ...
  imports: [
    // other imports...
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
  ]
})
export class AppModule { }

This setup allows you to visualize and manage your app’s state, making it easier to debug issues related to state management.

Remember, the specific setup and configuration might vary depending on your project structure and requirements. Always refer to the latest NgRx documentation for the most up-to-date practices and APIs.