I am trying to make a rather big, scalable application and I was told it is best practice to have one single store storing the current global state (including both transient/deleted-on-reload and session-persistent data) of the whole application, even if it is separated into multiple modules.
Now I was wondering why the example app of the ngrx/store which you can find on the ngrx/store-website uses multiple stores; each reducer has an own piece of code like this:
export interface State {
ids: string[];
entities: { [id: string]: Book };
selectedBookId: string | null;
};
export const initialState: State = {
ids: [],
entities: {},
selectedBookId: null,
};
So why does the official guide not use a single store as recommended by most people? Or is it considered as a single store as long as all reducers belong to one module? If not, how do I implement one single, central store? My idea would be to use a Store generic and put their variations into a table. The other option would be to have one single JS-object whose properties you update with reducer-actions. Either way you have to have some structure in the table or Object. Are there any best practices for this? Do you know a better example-app?
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.
NgRx is a state management solution for Angular built on top of RxJS which adheres to the redux pattern. It contains an immutable centralized store where the state of our application gets stored. We select slices of state from the Store using Selectors , which we can then render in our components.
Why should I use NgRx? It makes applications much more maintainable and testing-friendly because it decouples Business and Domain logic from the Rendering layer. It's also easier to debug because every action in the application is a command that can be traced back using Redux DevTools.
The example app is using a single store. State in this case is the interface for a reducer. You can have many reducers in one store.
It's considered best practise to use a single store. A single store should be sufficient for almost all small and medium sized apps.
There is a very good example of the Angular Tour of Heroes application recreated with NGRX Store. You can find it here: http://bodiddlie.github.io/ng-2-toh-with-ngrx-suite/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With