--- title: Bitovi Academy - Installing NgRx description: Learn how to add NgRx to an Angular project. --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Why NgRx ](https://www.bitovi.com/academy/learn-ngrx/why-ngrx.html?hsLang=en-us) - [ Getting Started ](https://www.bitovi.com/academy/learn-ngrx/getting-started.html?hsLang=en-us) - [ Installing NgRx ](https://www.bitovi.com/academy/learn-ngrx/ngrx-init.html?hsLang=en-us) - [ Creating Actions ](https://www.bitovi.com/academy/learn-ngrx/create-actions.html?hsLang=en-us) - [ Dispatching Actions ](https://www.bitovi.com/academy/learn-ngrx/dispatch-actions.html?hsLang=en-us) - [ Testing Actions ](https://www.bitovi.com/academy/learn-ngrx/test-actions.html?hsLang=en-us) - [ Create an API Effect ](https://www.bitovi.com/academy/learn-ngrx/create-api-effects.html?hsLang=en-us) - [ Testing API Effects ](https://www.bitovi.com/academy/learn-ngrx/test-api-effects.html?hsLang=en-us) - [ Creating Redirect Effects ](https://www.bitovi.com/academy/learn-ngrx/create-redirect-effects.html?hsLang=en-us) - [ Testing Redirect Effects ](https://www.bitovi.com/academy/learn-ngrx/test-redirect-effects.html?hsLang=en-us) - [ Create a Reducer ](https://www.bitovi.com/academy/learn-ngrx/create-reducer.html?hsLang=en-us) - [ Testing Reducers ](https://www.bitovi.com/academy/learn-ngrx/test-reducer.html?hsLang=en-us) - [ Creating Selectors ](https://www.bitovi.com/academy/learn-ngrx/create-selectors.html?hsLang=en-us) - [ Testing Selectors ](https://www.bitovi.com/academy/learn-ngrx/test-selectors.html?hsLang=en-us) - [ Using Selectors ](https://www.bitovi.com/academy/learn-ngrx/use-selectors.html?hsLang=en-us) - [ Testing Selector Use ](https://www.bitovi.com/academy/learn-ngrx/test-used-selectors.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Installing NgRx `page` Learn how to add NgRx to an Angular project. > **Quick Start**: You can checkout [this branch](https://github.com/bitovi/angular-ngrx-chat/tree/starting-point) to get your codebase ready to work on this section. ## Overview 1. Add NgRx schematics. 2. Add NgRx dependencies. 3. Generate Global Store using NgRx schematics. 4. Generate Login Feature Store using NgRx schematics. ## Installing Project Dependencies We will need access to the Angular cli for this section, so if you haven’t already installed the project’s dependencies ([Getting Started](https://www.bitovi.com/academy/learn-ngrx/getting-started.html?hsLang=en-us)), be sure to install them: ``` npm install ``` ## NgRx Dependencies Since we are going to use multiple NgRx tools, let’s install everything we need: ### NgRx Schematics First, install [NgRx schematics](https://ngrx.io/guide/schematics/install#installing-with-ng-add), a tool that will allow us to run schematics from the CLI to quickly generate code. This command will install NgRx schematics and update `angular.json`: ``` npx ng add @ngrx/schematics@14 ``` ### NgRx Libraries Next, let’s install the [NgRx dependencies](https://ngrx.io/guide/schematics#dependencies). This command will install the NgRx dependencies and update `package.json` and `package-lock.json`: ``` npm install @ngrx/{store,effects,entity,store-devtools}@14 --save ``` ## Generating Global Store We’ll take advantage of NgRx schematics to [generate our initial state management files](https://ngrx.io/guide/schematics/store#command), and register the root of our Global Store within `app.module.ts`. ``` npx ng generate store State --root --state-path store --module app.module.ts ``` We are now setup to be able to generate NgRx Features. ## Generating Login Feature Set The Login Feature Set in our application will be responsible for holding information about authentication and the authenticated user. ### Setup We’ll take advantage of NgRx schematics to quickly [generate a Feature Set](https://ngrx.io/guide/schematics/feature#command): ``` npx ng generate feature store/login/Login --module app.module.ts --reducers ../../store/index.ts ``` NgRx schematics will prompt us with a few questions: - `Should we generate and wire success and failure actions?` **Yes**. We will modify the Actions a little bit, but this is enough to get started. - `What should be the prefix of the action, effect and reducer?` **load**. The default value. We will change the names for Actions, Effects and Reducers, so don’t worry about the prefix right now. This command accomplishes the following: 1. Creates a `src/app/store/login` directory containing `login.actions.ts`, `login.effects.ts`, `login.reducer.ts`, and `login.selecors.ts`, as well as associated spec files 2. Updates `app.module.ts` to initialize the Login Feature Store and Feature Effects 3. Updates `src/app/store/index.ts` to: a. Add Login Feature Reducers map b. Add the Login State type to the Global `State` interface ### Register Root `EffectsModule` in `AppModule` This project has [prettier](https://prettier.io/) installed, so you can format files throughout the course. Right now the `imports` for `AppModule` found at `src/app/app.module.ts` has a long imports array. To make this more readable, we will [format this file](https://code.visualstudio.com/docs/editor/codebasics#_formatting). To do this using [vscode](https://code.visualstudio.com/), we can open `src/app/app.module.ts` then press `Shift` + `Option` + `F` for Mac or press `Shift` + `Alt` + `F` for Windows: src/app/app.module.ts ``` // src/app/app.module.ts import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginModule } from './login/login.module'; import { StoreModule } from '@ngrx/store'; import { reducers, metaReducers } from './store'; import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import { environment } from '../environments/environment'; import * as fromLogin from './store/login/login.reducer'; import { EffectsModule } from '@ngrx/effects'; import { LoginEffects } from './store/login/login.effects'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, LoginModule, StoreModule.forRoot(reducers, { metaReducers }), !environment.production ? StoreDevtoolsModule.instrument() : [], StoreModule.forFeature(fromLogin.loginFeatureKey, fromLogin.reducer), EffectsModule.forFeature([LoginEffects]), ], bootstrap: [AppComponent], }) export class AppModule {} ``` Next, we need to manually update our `app.module.ts` to [register NgRx Global Effects](https://ngrx.io/guide/schematics#initial-effects-setup). To accomplish this, we need to add `EffectsModuloe.forRoot([])` to our `AppModule` imports, as shown below: src/app/app.module.ts ``` // src/app/app.module.ts import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginModule } from './login/login.module'; import { StoreModule } from '@ngrx/store'; import { reducers, metaReducers } from './store'; import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import { environment } from '../environments/environment'; import * as fromLogin from './store/login/login.reducer'; import { EffectsModule } from '@ngrx/effects'; import { LoginEffects } from './store/login/login.effects'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, LoginModule, StoreModule.forRoot(reducers, { metaReducers }), EffectsModule.forRoot([]), !environment.production ? StoreDevtoolsModule.instrument() : [], StoreModule.forFeature(fromLogin.loginFeatureKey, fromLogin.reducer), EffectsModule.forFeature([LoginEffects]), ], bootstrap: [AppComponent], }) export class AppModule {} ``` ### Generate Login Feature Lastly, we need to update `src/app/store/login/login.reducer.ts` to include a `LoginPartialState` interface, which is easier to import when: 1. Writing tests for `Components` using NgRx Selectors 2. Writing tests for NgRx Selectors themselves src/app/store/login/login.reducer.ts ``` // src/app/store/login/login.reducer.ts import { Action, createReducer, on } from '@ngrx/store'; import * as LoginActions from './login.actions'; export const loginFeatureKey = 'login'; export interface State { } export interface LoginPartialState { [loginFeatureKey]: State; } export const initialState: State = { }; export const reducer = createReducer( initialState, on(LoginActions.loadLogins, state => state), on(LoginActions.loadLoginsSuccess, (state, action) => state), on(LoginActions.loadLoginsFailure, (state, action) => state), ); ``` > **Wrap-up**: By the end of this section, your code should match [this branch](https://github.com/bitovi/angular-ngrx-chat/tree/ngrx-init). You can also compare the [code changes for our solution to this section](https://github.com/bitovi/angular-ngrx-chat/compare/starting-point...ngrx-init) on GitHub or you can use the following command in your terminal: ``` git diff origin/ngrx-init ``` ###### On this page... ###### Get help If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4) If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion) ## Join the Bitovi Newsletter Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason! *By providing your email you agree to receive communications from Bitovi* ![](https://bitovi.github.io/academy/static/img/close.svg) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/academy/learn-ngrx/ngrx-init.html", "description": "Learn how to add NgRx to an Angular project. " }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ```