CODEWITHSUNDEEP
javascriptangularangular-moduleangular-redux
Gregor Doroschenko
Gregor Doroschenko

Reputation: 11696

How can I access angular-redux store from child module?

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.

Upvotes: 3

Views: 1929

Answers (2)

Roger Trussell
Roger Trussell

Reputation: 7

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.

Upvotes: -2

Ferdinand Malcher
Ferdinand Malcher

Reputation: 211

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

Upvotes: 5

Related Questions