3

In my angular app I use angular-redux for application state management. In my main module I defined my redux store. Like this:

export class MainModule {
  constructor(private ngRedux: NgRedux<MainAppState>,
              private devTools: DevToolsExtension) {
    let enhancers = [];

    if (environment.production === false && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    this.ngRedux.configureStore(
      reducer,
      {} as MainAppState,
      [],
      enhancers);
  }
}

I created new child module, which contains some components. These components should access to application state. In one of these components I access via @select to store, but this doesn't work. Here is how I access to store:

export function getLanguage(state: LanguageState) { return state.userLanguage; }

And this code I have in my ChildComponent class:

export class ChildComponent implements OnInit {

  @select(getLanguage) savedUserLanguage$: Observable<LanguageState>;

  // more code

}

How can I access to application state store from child modules? What should I import in child module? Will It be better to create own module only for redux store handling? Maybe I forgot something?

I use Angular v4 and @angular-redux/store v6.

Gregor Doroschenko
  • 11,488
  • 5
  • 25
  • 37
  • 2
    I try to reproduce your problem here: https://stackblitz.com/edit/angular-redux-child-module-problem?file=app%2Fchild%2Fmessage-box%2Fmessage-box.component.ts I set up a child module accessing the redux store provided in the `AppModule`. The scenerio I built works. Can you provide further information to limit the problem? – Gregor Woiwode Nov 30 '17 at 09:24
  • @GregorWoiwode My child module will be loaded via lazy loading. Can this be a problem? – Gregor Doroschenko Nov 30 '17 at 09:46
  • No it is no problem. I updated the demo for you using lazy loading: https://stackblitz.com/edit/angular-redux-child-module-problem?file=app%2Fchild%2Fchild-routing.module.ts Since `NgRedux` is provided as service in the `AppModule` every `Child` can request the instance. – Gregor Woiwode Nov 30 '17 at 09:59

2 Answers2

5

I'd recommend creating a separate module that just contains your store, e.g. StoreModule. You can then import your StoreModule into all your child modules and access your store from there. This is the way they go in the official example app:

StoreModule: https://github.com/angular-redux/example-app/blob/master/src/app/store/module.ts

Child Module: https://github.com/angular-redux/example-app/blob/master/src/app/elephants/module.ts

Component in child module: https://github.com/angular-redux/example-app/blob/master/src/app/elephants/page.ts

Ferdinand Malcher
  • 211
  • 1
  • 3
  • It seems that this approach wont work with lazy loaded modules. Importing the `StoreModule` multiple times leads into multiple stores. I built a sample here: https://stackblitz.com/edit/angular-redux-child-module-problem?file=app%2Fchild%2Fmessage-box%2Fmessage-box.component.ts There is a pending PR trying to support lazy loaded reducers: https://github.com/angular-redux/store/pull/416 – Gregor Woiwode Nov 30 '17 at 13:07
-2

I was thinking about refactoring some ugly old JavaScript code that uses prototypal inheritance into an Angular 7+ project. I was asking myself pretty much the same question. Inspired by my udemy Angular course, I tried an experiment with a ngrx store and lazy loaded modules.

(Keep in mind that ngrx is SIMILAR to @angular-redux, but it's NOT the same thing. See https://ngrx.io/docs for details.)

Here it is.

I create the store in the main module with StoreModule.forRoot and in each lazy loaded module, I create a reference to the store with StoreModule.forFeature.

(See https://ngrx.io/api/store/StoreModule for details.)

When I dispatch actions on the store with the lazy loaded components, those actions (and corresponding reducers) seem to change the value to which the main app component subscribes.

Also, when I dispatch actions on the store with the main app component, those actions (and corresponding reducers) seem to change the value to which the lazy loaded components subscribe.

Also, it's hard to explain what I did in a simple 200-500 character block so I had to use a github project.

Roger Trussell
  • 7
  • 3