NgRx Component Store: Mastering State Management in Angular

Welcome to this comprehensive tutorial on NgRx Component Store! In this lesson, we'll delve into the world of state management in Angular applications using NgRx, a powerful library for managing state in Angular applications. By the end of this tutorial, you'll be able to implement NgRx Component Store in your own projects. 🎯

Why NgRx? 💡

NgRx is an Angular-specific package for Redux, a predictable state container and side-effects library. It provides a powerful solution for managing application state in a predictable and testable manner, making it ideal for large-scale Angular applications. 📝

Prerequisites

Basic understanding of Angular (Angular 9+ recommended)
Familiarity with TypeScript
Knowledge of JavaScript ES6 features (optional but recommended)

Getting Started

First, let's install NgRx in our Angular project:

npm install @ngrx/store @ngrx/effects --save

Now, let's create our first NgRx store!

Creating the Store

Create a store folder in the app directory.
Inside the store folder, create a new file named app.store.module.ts.

typescript

import { StoreModule } from '@ngrx/store';
import { appReducer } from './reducers';

@NgModule({
  imports: [StoreModule.forRoot({ app: appReducer })],
})
export class AppStoreModule { }

In the store folder, create a new file named reducers and inside it, create a new file named index.ts.

typescript

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

export const initialState = { counter: 0 };

export const counterReducer = createReducer(
  initialState,
  on(CounterActions.increment, state => ({ counter: state.counter + 1 })),
  on(CounterActions.decrement, state => ({ counter: state.counter - 1 })),
);

Create a new file named counter.actions.ts inside the reducers folder.

typescript

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

Finally, let's use our store in a component. Add the AppStoreModule to the AppModule imports.

typescript

import { AppStoreModule } from './store/app.store.module';

@NgModule({
  imports: [AppStoreModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

Now, let's inject and connect our store to our component!

Connecting the Store

Import the StoreModule and our action types in the component.

typescript

import { Store, select } from '@ngrx/store';
import { CounterActions } from '../store/reducers/counter.actions';

Inject the Store in the constructor.

typescript

constructor(private store: Store) {}

Use the select operator to access the state and dispatch actions.

typescript

this.counter$ = this.store.pipe(
  select(state => state.counter),
);

incrementCounter() {
  this.store.dispatch(CounterActions.increment);
}

decrementCounter() {
  this.store.dispatch(CounterActions.decrement);
}

Now, you have a basic understanding of how to create and use an NgRx store in an Angular application!

In the next sections, we'll dive deeper into NgRx concepts, including selectors, effects, and more! 🚀

Stay tuned for more on NgRx Component Store! 💡