Angular: NGRX clean architecture with multiple stores

by Kate Sky

Before we go into Part 2 (testing of the multi-feature/store), I want to demonstrate the implementation of lazy loading of modules with multiple stores. So the objective of this article will be to show you how to add feature stores to the Feature module, which are loaded lazily when a route is activated.

Finally, I am going to provide links to the repository to GitHub.

Following is the list of topics that we are going to discuss in this article:

1. Application objective.
2. Application architecture
3. Lazy loading of the feature modules
4. Lazy loading demo
5. Conclusion
6. Links
7. Part 2 ( to be continued)

1. The objective of the application     

In this example, I want to demonstrate an app that will track home buying data. It will have a dashboard with links to a favorite list and a list of visited homes. Users will also be able to click on a link that will take her to a list of all prospective homes. From there, she can go into detail for each home.  

2. Application architecture and folder structure

In this example, we have separated this application in high-level feature modules. By doing so, it allows us to lazy load features along with store modules based on the current route.

3. Lazy loading of the feature modules

“By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times. ” – From Angule.io

We now can lazy load our feature module by registering it in the routing module:

4. Lazy loading demo

When we have a clean separation of the features into modules, it allows us to register routes to be lazy-loaded.
Let’s see it in action by checking the console:

When app navigates to Homes we see that our feature1 module is fetched and an additional file appears in the console:

5. Conclusion

In this article, I tried to deliver a technical guide on how to organize your application NGRX stores and provide you with examples of how they can be registered alongside with routing modules.

We started with an application description. I went over the architecture and folder structure. We then looked at registering a lazy loaded module. Finally, we looked at the demo.

6. Links

• https://github.com/katesky/ngrx-multy-store-part-1.5
• https://stackblitz.com/edit/ngrx-multy-store-part-15

7. Part 2 (To be continued…)

Where I will show how to test a component that uses a feature store. Some mocking will take place.

I hope this article helps you out with adding NGRX to your application.

Angular: NGRX clean architecture with multiple stores

by Kate Sky

The objective of this article is to provide a technical implementation of the NGRX for an application with a complexity that could benefit from adding feature store(s) in addition to the root store.

Finally, I am going to provide links to my GitHub repository with the example code.

In part 2, I will show how to unit test components that use a feature store and later we will go into the unit testing of the NGRX store itself.

This is the list of topics that we are going to discuss in this article:

1. A high-level use case for state management.
2. Getting started with a root store
3. Adding feature store to the application
4. Organizing your store folders
5. Adding stores to your components
6. Conclusion
7. Links
8. Part 2 ( to be continued)

1. High-level use case for state management.

When a decision has been made to manage the state of your complex application by adding NGRX, it is important to understand that you will not be able to convert the whole application to use the store right from the start.

It will be a gradual process that I will try to provide a technical guide for. In the example, you will see a RootStoreModule and a Store1Module.

The root store is where you will start. This store will be the highest level of user/system actions that can be performed in the application. For example, a dashboard app will have links to other areas, so the root store will load the available links and user access and privileges needed for the app to run. Root store will manage the state of the highest level of the application or lowest since it is a root (pun attended).

The feature store is an abstraction for parts of the application that are feature-based. For example, the user will click on a feature of the application from a dashboard, that allows him to manage orders, sales, employees, etc.  This is where the feature will load or change data using the feature store. It will manage the state of this feature along.

First, you must install NGRX by following the installation steps from https://ngrx.io/guide/store/install

2. Getting started with a root store

Second, you will create a folder where you will hold all files related to the root store.

Inside the folder, you will have files needed for the store: actions, effects, reducers and an index file for exports. One of the necessary imports is CommonModule and reducers and effects.

If you use the CLI’s “ng add @ngrx/store” the structure is flatter. I like to organize it in a more 2D way.

Second, you will add the RootStoreModule to the app.module( CLI will add it for you!)

3. Adding Feature store to the application

When adding a feature store module and adding the imports one major difference from the root is the forFeature method.

Ones all the files are created you can add feature module to the app.module just like the RootStoreModule

4. Organizing your store folders

In this simple example, you can see a separate folder for the feature store on the same level as the root store, but in a real application, I recommend adding a feature store folder on the same level as the feature folder.

5. Adding stores to your components

Since this example uses both stores in the app component, it’s pretty clear how easy it is to use the store and create a truly reactive application using an NGRX store.

In AppComponent you can find root store and feature store usage.

Stores are injected into the constructor and actions are dispatched to load the data:

You can see that the template is using the async pipe to load the data, there are no subscribe events. Observables are assigned the selectors from the store:

6. Conclusion

In this article, I tried to deliver a technical guide on how to organize your application NGRX stores and provide you with examples of how they can be organized.

We started by setting up the root and feature stores and registering them in the app module. We then added the stores to a component and saw how data is displayed on the screen.

7. Links

• https://github.com/katesky/ngrx-multy-store
• https://stackblitz.com/edit/github-ngrx-multy-store
• https://github-ngrx-multy-store.stackblitz.io

8. Part 2 (To be continued…)

Where I will show how to test a component that uses a feature store. Some mocking will take place.

I kept this project as simple as possible, so you can even take the source code and add it to your application as a template. I know I will in the future.

I hope this article helps you out with adding NGRX to your application.