Angular 6 NgRx Store example – Angular State Management

NgRx Store is a state management solution for Angular apps that helps us build applications by working around our app’s data (state). In this tutorial, we’re gonna look at how to work with NgRx Store, custom Actions, Reducers. Then we will practice to understand all of them in a simple practical Angular 6 example.

Related Posts:
– NGXS: Angular 6 NGXS example – Angular State Management
– State Management with Redux:

– Reactive Streams:

NgRx Store to manage App State

Why we need a State container

State container helps JavaScript applications to manage state.
=> Whenever we wanna read the state, look into only one single place – NgRx Store.
=> Managing the state could be simplified by dealing with simple objects and pure functions.

NgRx Store

Store holds the current state so that we can see it as a single source of truth for our data.
– access state using store.select(property) (property is defined at app.module.ts in StoreModule.forRoot()).
– update state via store.dispatch(action).

Action

Action is payload of information that is sent to Store using store.dispatch(action).
Action must have a type property that should typically be defined as string constants. It indicates the type of action being performed:

Reducer

Reducer is a pure function that generates a new state based on an Action it receives. These Actions only describe what happened, but don’t describe how state changes.

*Note: Reducer must be a pure function:
=> From given arguments, just calculate the next state and return it.
=> No side effects. No API or non-pure function calls. No mutations.

Import @ngrx/store and Reducer

app.module.ts

Practice

Example overview

angular-6-ngrx-store-example-project-structure

This is a simple Angular 6 with NgRx Store Application that has:
AppState (app.state.ts) as the main state that is stored inside NgRx Store.
– 2 types of Action: CREATE_CUSTOMER and DELETE_CUSTOMER (customer.actions.ts).
– One Reducer (customer.reducer.ts).

We can save/remove Customer. App will update UI immediately.

angular-6-ngrx-store-example-result

>> Click on Delete button from any Customer:

angular-6-ngrx-store-example-delete-result

Step by step

Install NgRx Store

Run cmd: npm install @ngrx/store.

Create Data Model

app/customers/models/customer.ts

Create Actions

app/actions/customer.actions.ts

Create Reducer

app/reducers/customer.reducer.ts

Create App State

app/app.state.ts

Import NgRx Store

app/app.module.ts

Create Components
Create Customer Component

customers/create-customer/create-customer.component.ts

customers/create-customer/create-customer.component.html

Customer Details Component

customers/customer-details/customer-details.component.ts

customers/customer-details/customer-details.component.html

Customers List Component

customers/customers-list/customers-list.component.ts

customers/customers-list/customers-list.component.html

Import Components to App Component

app/app.component.ts

app/app.component.html

Source Code

Angular6-NgRx-Example

By grokonez | August 22, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*