Join Forum Sign In Ask Question
ConcretePage.com HOME
CORE JAVA
JAVA EE
FRAMEWORK
UTILITY
WEB SERVICES
TOOLS
WEB
INTERVIEW
QUIZ
ANDROID
Search
FORUM
Home > Angular > NgRx
NgRx/Store 4 + Angular 5 Tutorial By Arvind Rai, November 22, 2017
This page will walk through NgRx/Store 4 and Angular 5 tutorial. @ngrx/store is RxJS powered state management that is inspired by Redux. In NgRx, state is composed of a map of action reducer functions. Reducer functions are called with dispatched action and current or initial state and finally reducer returns immutable state. Find the API of @ngrx/store which we will discuss in our example. Action: Action is state changes. It describes the fact that something happened but does not specify how the applications state changes. ActionReducerMap: ActionReducerMap registers the reducers and then it is configured in application module using StoreModule. ActionReducer: It is used to create reducers such as logger.
MetaReducer: MetaReducer forms the root meta-reducer that is configured in application module using StoreModule. StoreModule: StoreModule is a module in @ngrx/store API that is used to configure reducers in application module.
Enter Your Email Id
Subscribe
createFeatureSelector: It creates a feature selector for a state. createSelector: It creates a selector to wrap a specific state. Store: It provides Store.select() and Store.dispatch() to work with reducers. Store.select() selects a selector and Store.dispatch() dispatches the type of action to reducer. Now find the complete example step by step. Contents 1. Technologies Used 2. Install Angular CLI and NgRx/Store 3. Create State 4. Create Action Classes 5. Create Reducer
Latest Post
6. Using createFeatureSelector() and createSelector()
Java Clock
7. Using ActionReducerMap
NgRx/Entity Example
8. Using ActionReducer 9. Using MetaReducer
Angular CanDeactivate Guard Example
10. Using StoreModule
Angular 2/4 Pattern Validation Example
11. Using Store.select() and Store.dispatch()
NgRx/Effects 4 Example
12. Complete Example 13. Run Application 14. References 15. Download Source Code
1. Technologies Used Find the technologies being used in our example. 1. Angular 5.0.0 2. Angular CLI 1.5.0 3. NgRx/Store 4.1.1 4. TypeScript 2.4.2 5. Node.js 6.11.0
Top Trends
6. NPM 3.10.10
Angular 2 Http post() Example
2. Install Angular CLI and NgRx/Store
Angular 2 NgIf Example
Find the steps to install Angular CLI.
Angular 2 Http get() Parameters + Headers + URLSearchParams + RequestOptions Example
1. Make sure that Node and NPM are installed with minimum version as Node 6.9.x and NPM 3.x.x respectively. 2. Now run command using command prompt. npm install -g @angular/cli
Angular 2 Radio Button and Checkbox Example
This will install Angular CLI globally.
Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example
3. To generate a new project, run the command. ng new my-app 4. Now install @ngrx/store. Go to the directory my-app using command prompt and run the command. npm i @ngrx/store --save
Popular Post
Now we are ready to work with NgRx/Store and Angular.
Spring Boot REST + JPA + Hibernate + MySQL Example
5. Find the link for above installation references. For Angular installation: link For NgRx/Store installation: link
Angular 2 Http get() Example
3. Create State
Angular 2 @Input and @Output Example
State is a single immutable >Java Articles Angular Articles Favorite Articles
- {{article.id}} - {{article.title}} - {{article.category}}
app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `
` }) export class AppComponent { } app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { StoreModule } from '@ngrx/store'; import { AppComponent } from './app.component'; import { ArticleComponent } from './components/article.component'; import { reducers, metaReducers } from './reducers/reducers'; @NgModule({ imports: [ BrowserModule, StoreModule.forRoot(reducers, {metaReducers})
],
declarations: [ AppComponent, ArticleComponent
],
providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }
13. Run Application To run the application, find the following steps. 1. Download source code using download link given below on this page. 2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link. 3. Install NgRx/Store using NPM command. 4. Run ng serve using command prompt. 5. Now access the URL http://localhost:4200 Find the print screen of output.
14. References @ngrx/store Angular QuickStart
15. Download Source Code ngrx-store-4-angular-5-tutorial.zip
Tweet
POSTED BY ARVIND RAI
Popular Tutorials:
Java 8
|
Spring 4
|
Angular
|
Struts 2
|
Android
FIND MORE TUTORILAS SPRING BOOT
HIBERNATE
PRIMEFACES
RESTEASY
FREEMARKER
Login Leave your comment... 3 Comments
Sort by Newest
Jay Ordway day ago
You included no package.json in the downloadable code... Reply
Arvind
Jay Ordway day ago
Create project using Angular CLI. You will get package.json. Find the link. https://angular.io/guide/quickstart Install NgRx. Find the link https://www.concretepage.com/angular-2/ngrx/ngrx-store-4-angular-5-tutorial#Install Then use our src. Follow the link. https://www.concretepage.com/angular-2/ngrx/ngrx-store-4-angular-5-tutorial#run Reply
Vishal Saxena 21 days ago
Very clear and informative articles. Bringing in place all the constructs in one app. Thank you this helped me a lot. Reply ADD WIDGETPACK TO YOUR SITE
POWERED BY WIDGET PACK™
Favorite Links
About Us
Java Technology
We are a group of software developers.
Hibernate Annotations
We enjoy learning and sharing technologies.
Spring Framework
Mobile Apps
To improve the site's content,
your valuable suggestions
JQuery
are most welcome. Thanks
Apache Struts
Email :
[email protected]
MyBatis Quartz Scheduler
ConcretePage.com
Angular Thymeleaf FreeMarker
©2018 concretepage.com | Privacy Policy | Contact Us
SCJP Quiz