Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can lazy loaded features communicate state between features with ngrx in Angular 6?

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.

like image 730
J-man Avatar asked Aug 02 '18 20:08

J-man


People also ask

How does Angular handle Lazy Loading?

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.

Is it possible to manage more states using NgRx?

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.

What is the benefit of Lazy Loading in Angular?

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.

Can we lazy load component in Angular?

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.


1 Answers

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

like image 175
Fateh Mohamed Avatar answered Oct 21 '22 05:10

Fateh Mohamed