In these story series I am going to cover specific parts of the Angular application which are not obvious to implement with the NgRx library. Angular NgRX is powered state for Angular applications, inspired by . It helps us to manage a state of the application, and there are some benefits over the standard service-oriented approach. NgRx RxJS management Redux Short Story If you are lazy to read a step-by-step explanation, check for the full implementation. Github repo example Problem We are writing an Angular app with the NgRX approach. We want to be sure that before we can enter to page we have data to show in this component. You can check the standard implementation of the . And we will go forward to understand how to achieve that with the NgRX State management. Profile Route Resolver from official docs Pre-conditions Let’s take a look at It’s a classical subscription to Observable been returned by network call from No matter what’s for is using this data, let’s assume we need to be sure data exists before we enter the component. ProfileComponent . ApiService . ProfileComponent Defining Reducer and Actions My personal preferences to keep files in feature oriented structure. So we will place new files to the same folder as our were placed. Here is a new structure of folder after we’ve created and . ProfileComponent profile.reducer.ts profile.actions.ts Profile folder structure profile.component.ts profile.component.html profile.actions.ts profile.reducer.ts Taking a look at profile.actions.ts — list of actions which we will use to manipulate data related to Profile entity. In case want to extend functionality, we can add such actions as , etc. For now, we are fine with action which will trigger for updating of the Profile data. IProfileActions PORFILE_INIT PROFILE_CHANGE — is single action type which we define to describe an action of getting new data ( type). UpdateAction IProfileData Now let's handle this action in the profile.reducer.ts — to describe how are we going to extend basic reducer of application. IProfileState — default value for initialState ProfileData — processes single action (UPDATE) to describe state changes after the action was triggered with some payload reducer Extending root reducer We compose root state of the application by adding reducer to all (LOC: 11 ). Object reducers app.state.ts And the last thing — we defining the StoreModule with the reducers we’ve created before (LOC: 8 ). storeReducers app.module.ts Setting up route resolver Now, let’s put resolver on the route we want to wait until data will be loaded. Continue by creating with the corresponding class as we name it on the LOC: 8 in above. This line is saying to wait for navigation to route until data will be resolved in the which we are going to implement in a second. profile.resolver.ts app.routes.ts /profile ProfileResolver A newly created class implementing interface which obliges us to define function. This function can return , or expected type directly. [Resolve](https://angular.io/api/router/Resolve) _resolve_ Promise Observable : Function **waitForProfileDataToLoad** Subscribe store to listen for object changes. LOC 23: profile Map values to get the only from the general object LOC 24: profileData profile Ignore all triggers where does not exist LOC 25: profileData take(1) — getting only first value, as long as we need single one to resolve route LOC 26: : Function **initProfileData** Getting the first value of object located in the store. If there is no value: profile Get data by using getProfileData() Convert it to (we need only once, so no point for subscribing to Observable) Promise And dispatch with the which we just got from server UpdateAction data Route resolver conclusion We’ve initialized data by getting it from the server, and dispatching new state for the application store. Meanwhile, we told our function to listen for the store changes, and return with the first nonempty it will find in the store. resolve Observable ProfileData Using route data in component Finally, we are getting from route snapshot, assuming it exist there. profileData must Conclusion NgRx driven applications make very clear a data flow process through the application. I hope that will give you some patterns how to solve route resolving problem. Here are few things you can also do to improve your application experience: could be moved or removed if you have some different places to init data. **initProfileData** — You can implement spinner to show while route resolvers are in action. There is some basic implementation in the . full repo example Your component could be subscribed to store directly if you expect data to be changed from another place. In such case, you can convert to return instead of data. Could be nice homework exercise to master this topic 😜. ProfileResolver Boolean Github repo example Thanks for reading! If you want me to write more similar stories recommend this post (by clicking the ❤ button). Write your thoughts to comments and subscribe to my to find more stories. medium

Flow

Initialized

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Angular NgRx: Resolving Route Data

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Mykhailo Churilov (Mikki Kobvel)

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Angular NgRx: Resolving Route Data

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Mykhailo Churilov (Mikki Kobvel)

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES