Menu
If I have an app that uses lazy loading, and also using ngrx to manage state, I have a state instance for each feature with its own reducers, actions, etc. So for example:
product-feature
product-edit
product-add
product-admin
state
product.reducer.ts
product.actions.ts
product.effects.ts
product.index.ts
customer-feature
customer-edit
customer-add
customer-admin
state
customer.reducer.ts
customer.actions.ts
customer.effects.ts
customer.index.ts
With this structure, my main question is can the state between product-feature communicate and use the state between customer-feature? If I, as a user, go to customer-feature, but the customer-feature needed some state information from the product-feature, would it still render and get the data even though the product-feature was never created because the user did not go to it (via lazy loading)?
Most examples I see online deal with ngrx as one AppState and don't do lazy loading, and the lazy loading examples I see that do communication between components are parent/child. Some articles I read say that you need to extend the app state to include the feature state, as the feature state cannot be referenced in the app state. The instance I am wondering is communicating state between sibling features. Is this possible with ngrx via lazy loading?
Thanks.
730
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items. module'). then(m => m.
NgRx is a framework for building reactive applications in Angular. NgRx is inspired by the Redux pattern - unifying the events in your application and deriving state using RxJS. At a high level, NgRx stores a single state and uses actions to express state changes.
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.
Therefore, to make angular understand the need to load BackendService , the new steps are: lazy load the module, compile it to notify Angular about its dependencies, finally, through the compiled module, we access the component and then add it to the container.
ngrx will merge the new state of the lazy loaded module with the current state, and that will happen only when you navigate to one of the routes of your lazy loaded module, so if your product-feature is not loaded, you will not have access to it's store.
i suggest to move the part you need in your customer-feature, or you can create a shared module for that
175
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
