Angular ngrx-store: How to share store among modules (main module / feature module)

ngrx feature module state composition
share data between modules angular
ngrx lazy loading
ngrx test feature module
the feature name does not exist in the state, therefore createfeatureselector cannot access it
ngrx get value from store
ngrx/store angular 8
storemodule.forroot multiple reducers

I have two angular modules: main and feature:

Main / root module:

@NgModule({
    imports: [
        StoreModule.forRoot({router: routerReducer}),
        EffectsModule.forRoot([...]),
        ...
    ],
    declarations: [],
    ...
})
export class AppModule {}

Feature module:

@NgModule({
    imports: [
        StoreModule.forFeature('feature', {someValue: someValueReducer}),
        EffectsModule.forFeature([...]),
        ...
    ],
    declarations: [],
    ...
})
export class FeatureModule {}

I need to access 'feature' slice of data in main module to conditionally display / activate application tab based on data stored in feature module.

(In other words I need a global / shared piece of state accessible by all modules main and any feature module.)

  1. Is it possible to do that?
  2. Is it considered as good practise?

Currently I can't do that since there is no feature state in main AppState:

export interface AppState {
    router: RouterReducerState<RouterStateUrl>;
}

And typescript indicates error this.store.select('feature') since there is no feature key of main store AppState.

Using selector: this.store.select(selectFeatureValue) I am getting runtime error:

export const selectFeatureModule = createFeatureSelector<FeatureState>('feature');
export const selectFeatureValue = createSelector(selectFeatureModule ,
(state: FeatureState) => state.someValue);

I am getting error in main AppComponent:

TypeError: Cannot read property 'someValue' of undefined

In my opinion, that pretty much defeats the purpose of both: lazy loaded modules and lazy loaded stores.

You should probably rethink your design. Its usualy vice versa, that you need main state in your feature module and that's fine since you can't have feature module active without main one but vice versa is a bit odd.

Now, that being said, the main idea of lazy loaded store is that you don't have feature store keys in your main store but they are added afterwards, during the application lifetime as they are needed. So, what you can do is import your feature reducer into main module component where you need it and select from feature reducer directly. But again, its a question if that's something one would want to do. I wouldn't.

I would rethink the design and things i need in main module i would put into main reducer/store.

Sharing data between modules is peanuts., I have two angular modules: main and feature: Main / root module: #NgModule({ imports: [ StoreModule.forRoot({router: routerReducer}), EffectsModule.forRoot([  E.g. 1,2 main,polyfill row means that there is at least one module that appears in two chunks: main and polyfill. a and b modules share the same code fromab-module so we can also notice the

NgRx Tutorial: Add State to Feature Module, In this post we'll take a look on how to share data between the modules. Instead of just returning the data stored in the store, a selector can compute When the feature module is loaded, NgRx will append the feature's  Angular development best practices indicate we should break our applications into modules. Modules in Angular refer to a place where we group like components, services, directives, pipes, etc for our applications. The easiest to think about would be Feature Modules we simply break these up by feature or domain. But what about the App Module, […]

Using an NgRX Store Module in an Angular Application, Feature modules are Angular modules that group a bunch of components/​services, etc. into a module from the main app module, NgRx does things a little differently. Now I'm going to create an index.ts file in the starships/store/​reducers folder: We've Made it Easy to Share this Tutorial with Your Team. Type X(component) is part of the declarations of 2 modules . So, for solving this problem we create a Shared Module instead of sharing a component, now we share this module in all other modules for this we use import statement and import the shared module in all other modules after this the component will gets automatically shared to all the

NgRx, so that the rest of the components in the application can access this shared data The NgRX Store module is a state management library made for Angular. Some of the major concepts or terminology of the NgRX Store, most of which also the power of ngrx/store module in handling Angular Feature modules, I had to  Most likely, you’ve dealt with feature modules if you have 1 month experience in Angular. Since feature modules can be lazy loaded and because they are separate from the main app module, NgRx does things a little differently. In this post, I plan to describe how to setup a lazy loaded feature module with NgRx. The code is on github.

Separating state into angular modules with ngrx, Learn latest Angular, TypeScript, through to NGRX and beyond. Feature store modules will be imported into the Root Store Module allowing for a single root store module to be imported into your application's main App Module. Store. In the example implementation below we will use the feature name  Angular Module Structure. When setting up modules in an Angular application, I like to keep this hierarchy picture in mind. Child feature modules will hold the same hierarchy. If your able to maintain this structure your application will be much easier to maintain and separation of concerns will be easier to implement.

Best practice for accessing root store from feature module · Issue , Separating state into modules with forFeature(…) export function appReducer( state: ApplicationState = initialState, app.component.html ├── app.module.ts └── main.ts . So we can apply our module state in a seperate module store which would be a seperate folder in the customers folder: Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

Comments
  • setTimeout(() => this.store.select(selectFeatureValue) .subscribe(console.log.bind(console)), 1000); will get rid of the runtime error, but I would prefer to get rid of the setTimeout
  • Thanks for you response. Considering the opposite way - feature module has access to main module store, what would be the syntax to acces the main store slice from feature module given that feature module has its own type FeatureState?
  • I could dispatch an action in main module and feature store reducer could receive/handle this action and use the payload to save its own copy (similar to main store reducer).
  • metareducers are what you might be looking for. for example: netbasal.com/…
  • Thinking about this one more: If the main module has a (module) dependency on feature module, I can not share the state in the main module - in this case the feature module would require to have a (module) dependency on main module also creating a circular dependency.
  • if your main module have dependency on feature module then your feature module is not a lazy loaded one. although, that is not necessarily related to lazy loaded parts of store. but in general, you want to have lazy loaded reducers to follow lazy loaded modules so you dont have circular dependencies.