Sharing Top Content from the Angular-sphere.

Getting started with Angular and Redux

  • Redux provides a really great way of managing state in an Angular application.
  • The data and the state of the component is implemented using ngrx.
  • Here’s a quick summary of the redux store in this application:

    The following steps explains, what is required to get the state management setup in the Angular application, which uses an Angular service to request the data from the public API.

  • The reducer takes an initial state and executes methods matching the defined actions which were dispatched from the components or the effects.
  • When you start the application, and open it in Chrome, and the Redux state can be viewed, explored changed and tested.

This article shows how you could setup Redux in an Angular application using ngrx. Redux provides a really great way of managing state in an Angular application. State Management is hard, and usually ends up a mess when you invent it yourself. At present, Angular provides no recommendations or solution for this. Thanks to Fabian…

@c0deNinja: Getting Started with Angular and Redux #JavaScript #AngularJS

This article shows how you could setup Redux in an Angular application using ngrx. Redux provides a really great way of managing state in an Angular application. State Management is hard, and usually ends up a mess when you invent it yourself. At present, Angular provides no recommendations or solution for this.

Thanks to Fabian Gosebrink for his help in learning ngrx and Redux. The to Philip Steinebrunner for his feedback.

The demo app uses an Angular component for displaying countries using the public API https://restcountries.eu/. The view displays regions and the countries per region. The data and the state of the component is implemented using ngrx.

Note: Read the Redux documentation to learn how it works. Here’s a quick summary of the redux store in this application:

The following steps explains, what is required to get the state management setup in the Angular application, which uses an Angular service to request the data from the public API.

Step 1: Add the ngrx packages

Add the latest ngrx npm packages to the packages.json file in your project.

“@ngrx/effects”: “^4.0.5”, “@ngrx/store”: “^4.0.3”, “@ngrx/store-devtools”: “^4.0.0 “,

Step 2: Add the ngrx setup configuration to the app module.

In this app, a single Redux store will be used per module. The ngrx configuration needs to be added to the app.module and also each child module as required. The StoreModule, EffectsModule and the StoreDevtoolsModule are added to the imports array of the NgModule.

Step 3: Create the interface for the state.

This can be any type of object, array.

Step 4: Create the actions

Create the actions required by the components or the effects. The constructor params must match the params sent from the components or returned from the API calls.

Step 5: Create the effects

Create the effects to do the API calls. The effects are mapped to actions and when finished call another action.

Step 6: Implement the reducers

Implement the reducer to change the state when required. The reducer takes an initial state and executes methods matching the defined actions which were dispatched from the components or the effects.

Step 7: Configure the module.

Important here is how the StoreModule.forFeature is configured. The configuration must match the definitions in the components which use the store.

Step 8: Create the component

Create the component which uses the store. The constructor configures the store matching the module configuration from the forFeature and the state as required. User actions dispatch events using the actions, which if required calls the an effect function, which then calls an action and then a reducer function which changes the state.

Step 9: Use the state objects in the HTML template.

It is important not to forget to use the async pipe when using the state from ngrx. Now the view is independent from the API calls and when the state is changed, it is automatically updated, or other components which use the same state.

The redux-devtools chrome extension is really excellent. Add this to Chrome and start the application.

When you start the application, and open it in Chrome, and the Redux state can be viewed, explored changed and tested. This gives you an easy way to view the state and also display what happened inside the application. You can even remove state changes using this tool, too see a different history and change the value of the actual state.

The actual state can be viewed:

Getting started with Angular and Redux

Comments are closed, but trackbacks and pingbacks are open.