Help - How to memoize RTKQ selector with dynamic argument from state, not selector arg.

[padge]

Looking for help on this, as I can't wrap my head around how to get a proper memoized selector using RTKQ... The selector needs the gameId from store state, not a selector arg.

This is what I have right now that isn't memoizing:

const createInventorySelector = createSelector(
  (id: string) => id,
  (id) => api.endpoints.listInventoryForGame.select(id),
);
export const selectInventory = createSelector(
  (state: RootState) => state,
  selectGameId,
  (state: RootState, gameId) => createInventorySelector(gameId)(state),
);

const inventory = selectInventory(state);

I know state => state isn't good, but I'm trying to follow the example here https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks#memoization, and don't see how to do it otherwise.

Thanks.

[phryneas]

More like this.

const createInventorySelector = createSelector(
  selectGameId,
  (id) => api.endpoints.listInventoryForGame.select(id),
);
export const selectInventory = createSelector(
  (state: RootState) => state,
  createInventorySelector,
  (state: RootState, inventorySelector) => inventorySelector(state),
);

const inventory = selectInventory(state);

[padge]

Ahh ok, thank you for the correction. Unfortunately it's still not being memoized correctly, as the number of recomputations is the same as before (I'm using checkSelector from "reselect-tools"). It looks like it's recomputing after every dispatched action.

[markerikson]

Yes, a selector that has (state) => state is effectively broken and will never memoize correctly. Please don't do that :(

(In fact, Reselect ought to be warning you about that in dev mode.)

[padge]

Yeah okay, good to know. I was wondering if it was even possible. I suppose it's probably not necessary, given that the selector isn't doing any heavy computation? If that's the case, it might be worth adding a caveat to the selectGetPostError example in the docs.

Do you have any recommendations for a better solution, or do I just leave that selector as is and handle memoization on the selectors that depend on that selector?

[padge]

I tried something like this which was recomputed much less, but it doesn't seem ideal (accessing rtkq implementation details?):

export const selectInventory = createSelector(
  (state: RootState) => state.api.queries,
  selectGameId,
  (queries, gameId) => {
    return queries[`listInventoryForGame("${gameId}")`];
  },
);

[phryneas]

The question is also at which selector you are looking here.

The example I had above contains multiple selectors:

• createInventorySelector
• the selector created by .select(id)
• selectInventory

While selectInventory recalculates every time, the other two do not.

Realistically, you can rewrite my example up there to

const createInventorySelector = createSelector(
  selectGameId,
  (id) => api.endpoints.listInventoryForGame.select(id),
);

const selector = createInventorySelector(state)
const inventory = selector (state);

and both createInventorySelector and selector will recalculate significantly fewer times (they also would recalculate the same amount of times in the example with selectInventory , it just depends at which of those you look).

[markerikson]

Query selectors are created internally using createSelector, but strictly speaking don't benefit from being memoized (it's ultimately a straight lookup as you've got there) I was reminded they do derive the status flags.

That said, it feels like this might be easier if you skip the createSelector part:

const selectInventory = (state: RootState) => {
  const id = selectGameId(state);
  const inventorySelector = api.endpoints.listInventoryForGame.select(id)
  return inventorySelector(state);
}

or if you wanted to save on the slight cost of generating the per-ID selectors:

const selectorsForIds = {};

const selectInventory = (state: RootState) => {
  const id = selectGameId(state);
  
  if (!(id in selectorsForIds)) {
    selectorsForIds[id] = api.endpoints.listInventoryForGame.select(id)
  }
  const inventorySelector = selectorsForIds[id];
  return inventorySelector(state);
}

[padge]

Right okay, that makes sense. I like the example of not using createSelector, as it's more explicit that it won't be memoized since it relies on state => state. Thank you both for the help!