ngrx: how to pass parameters to selector inside createSelector method

ngrx selector with parameter example
ngrx combine selectors
ngrx createselector
ngrx selector not firing
ngrx get value from store without subscription
ngxs selector with parameter
ngrx/entity selectors
ngrx mock selector

I have a very simple state in my store:

const state = {
 records: [1,2,3],
};

I have a selector for records:

export const getRecords = createSelector(getState, (state: State) => state.records));

And what I want now is to have separate selectors for fetching each record by index. For this purpose I want to create one generic selector with props in this way:

export const getRecordByIndex = createSelector(
getRecords,
(state: State, { index }) => state.records[index]),
);

And after that create a couple of specific selectors e. g.:

export const getFirstRecord = createSelector(
getRecordByIndex(/* somehow pass index = 0 to this selector */),
(firstRecord) => firstRecord),
);

But I didn't find any mention how to pass parameters to selectors with props when we use them inside createSelector method. Is it possible?

From this blog post: https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

As of NgRx 6.1 selectors also accepts an extra props argument. Which means you can now define a selector as the following:

export const getCount = createSelector(
  getCounterValue, 
  (counter, props) => counter * props.multiply
);

this.counter = this.store.pipe(
  select(fromRoot.getCount, { multiply: 2 })
);

Ah ... but rereading your question, you are asking then how to build another selector that uses this selector? The above-linked article suggests building a factory function.

NgRx: Parameterized selectors - Angular In Depth, As of NgRx 6.1 selectors also accepts an extra props argument. Which means export const getCount = createSelector( getCounterValue, We can then call selectCustomer in the component and pass it an id : this.customer This way works with a property selectedCustomerId in the store. To select a  And after that create a couple of specific selectors e. g.: export const getFirstRecord = createSelector( getRecordByIndex(/* somehow pass index = 0 to this selector */), (firstRecord) => firstRecord), ); But I didn't find any mention how to pass parameters to selectors with props when we use them inside createSelector method. Is it possible?

I am using "@ngrx/entity": "7.2.0", and I can see that props are passed to each selector, for example in my component I am calling:

this.isActive$ = this.store.pipe(select(fromClient.isActive, { id: 'someid' }));

And then in my reducer I have the following:

export const getClientState = createFeatureSelector<ClientState>('client');

export const getClient = createSelector(
  getClientState,
  (state, props) => {
    // do something with props.id to get the client then:
    return state;
  }
);

export const isActive: = createSelector(
  getClient, // props are passed to here
  (state: any) => { // i don't add the props argument here, as i don't need them
    return state.isActive;
  }
);

Selectors, The createSelector can be used to select some data from the state based on data that isn't available in the store you can pass props to the selector function. Keep in mind that a selector only keeps the previous input arguments in its cache​. The createFeatureSelector is a convenience method for returning a top level  When using the createSelector and createFeatureSelector functions @ngrx/store keeps track of the latest arguments in which your selector function was invoked. Because selectors are pure functions , the last result can be returned when the arguments match without reinvoking your selector function.

You could use the projector function:

export interface Record {
  // Some sort of record interface
}

export interface State {
  records: Record[];
}

export const getRecords = createSelector(
  getState,
  (state: State): Record[] => state.records)
);

export const getRecordByIndex = createSelector(
  getRecords,
  (records: Record[], { index }) => records[index]),
);

export const getFirstRecord = createSelector(
  getRecords,
  (records: Record[]) => getRecordByIndex.projector(records, { index: 0 })
);

Compose selectors with additional arguments · Issue #18 · reduxjs , For this purpose I want to create one generic selector with props in this way: export const getRecordByIndex = createSelector( getRecords, (state: State, { index })  NgRx Selectors How to stop worrying about your Store structure — David East & Todd Motto @ ng-conf 2018 - the last part will show you an example with ngrx/router-store, but the whole talk is

With fixed parameters for the selector it works fine:

this.counter = this.store.pipe(
    select(fromRoot.getCount, { multiply: 2 })
);

but what's about dynamic parameters:

this.counter = this.store.pipe(
   select(fromRoot.getCount, { multiply: this.getMultiplier() })
);

getMultiplier() {
    ...
    return myUser.multiplier + magicFactor;
}

that did not work in my app :-( (NgRx version 8)

How to pass simple argument to createSelector? · Issue #140 , Hi there, is it possible to compose selectors with arguments? function selectedSelectorFactory(key) { return createSelector( [state => state.something], something => something[key] ); } One additional thing to consider is whether the parameter you are passing in is actually transient or if This approach works pretty well. Pass a parameter to the selector. Think of the store as a database and your parameter to a selector function is similar to a parameter passed to a select statement in sql. Having to resolve the correct part of the state inside subscribes constantly is messy.

NGRX: Selector with Parameter? : Angular2, Its possible to pass an argument to createSelector ? In this way, i dont have to create a factory and i can move the logic inside my component. Selectors are pure functions that take slices of state as arguments and return some state data that we can pass to our components. To better understand what selectors are and what they do, it helps see ngrx state as a data structure - a tree that can be serialised to JSON.

NGRX Store: Understanding State Selectors, Your store is the input, not any parameter you want to pass to your selectors. usually eventually meanders its way to “it should have been in the store in the first  Instead of doing store.select(x => foo.bar.baz) everywhere, you can create a selector for it and do store.select(selectBaz). You can combine selectors to. You can combine selectors to. In this way you should only have to setup the logic to traverse the state tree in one place.

Understanding the magic behind StoreModule of NgRx (@ngrx/store , Selectors are pure functions that take slices of state as arguments and method to get entities , we could pass state throughout selectors in a  Sometimes this is not possible, though. In such cases, you can make your selector a factory that takes in the argument and returns the selector. Then you can "create" your selector in a mapStateToProps factory and use the instance of the selector that is scoped to your argument. The only downside I see with this approach is that you have to

Comments
  • I feel so energetic because you shared a post of mine! :) To answer the question: the props property drills down to other selectors inside the selector. In other words getRecordByIndex, also retrieves the props property as its last argument.
  • what does "building a factory function" exactly mean? @timdeschryver how does this help to pass a parameter to the selector (which may be determined by the selector implementation)?
  • @JFFIGK search on "Static parameter" in the above blog post. It has an example.
  • This may help: sitepoint.com/factory-functions-javascript (But OMG it has a bunch of popups!) Or this: stackoverflow.com/questions/8698726/…
  • Looks like a hack but that should work! 👍