Top Level Reducer about ngx-redux-app HOT 5 CLOSED

Hello rkusuma!
Yes, first, you select the state from the application state:

export function getCurrencies(state$: Observable<State>) {
  return state$.select(state => state.currencies);
}

Then, you can compose selections of the properties within the state (ex. getting the currencies array)

export const getCurrencyEntities = compose(fromCurrencies.getCurrenciesEntities , getCurrencies);

When you select from the state within a component/directive/pipe/service, you have to use the selector from the root, not the selectors from the state you need:

//CORRECT
  this.currencies = this._store.let(fromRoot.getCurrencyEntities);
//INCORRECT (will throw an exception)
  this.currencies = this._store.let(fromCurrencies.getCurrencies));

I hope this answers your question!

from ngx-redux-app.

my reducer is quite deep... so it would harder to create selector function on each reducer.

Example State

{
  a: {
    b: {
      c: {
        xx: 10,
        yy: 'Hi'
      },
      ...
    },
    ...
  },
  ...
}

to get the value xx from c reducer i must create selector function in:

• c reducer
• b reducer
• a reducer

and it's possible to c reducer have many state.

from ngx-redux-app.

In this case, I would have a single reducer and a state (for a), and handle all the selections and changes within the a.reducer.ts and then expose them to the root reducer.

You can also compose multiple selectors in the root reducer as seen here between lines 146 and 152.

from ngx-redux-app.

yes, that's what i mean.

// app.reducer.ts
export interface State {
  moduleA: fromModuleA.State,
  moduleB: fromModuleB.State,
  ...
  moduleD: fromModuleD.State
}

export const getModuleAState = (state) => state.moduleA;
export const getEntities = createSelector(getModuleAState, fromModuleA.getEntities); 

// moduleA.reducer.ts
export interface State {
  subModuleAA: fromSubModuleAA.State,
  subModuleAA: fromSubModuleAA.State
}

export const getSubModuleAAState = (state) => state.subModuleAA;
export const getEntities = createSelector(getModuleAState, fromSubModuleAA.getEntities);

// sub-module-aa.reducer.ts
export interface State {
  entities: Enttities[],
  ...
}

export const getEntities = (state) => state.entities;

as you can see, i need to create 3 getEntities selector function to get entities from SubModuleAA reducer to App reducer.
there is still module B, module C, and module D.

is it expected to create chain selector function?

from ngx-redux-app.

Well, this is the way to go. You can also use a chain selector to select everything from module A (using composition) if you wish instead of adding a separate selector for each of the substates.

from ngx-redux-app.