[Docs] createSlice + selectors with Parameters

[jd-carroll]

The documentation gives the following example:

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {},
  selectors: {
    selectValue: (state) => state.value,
    // explicit return type means cycle is broken
    selectTimes: (state, times = 1): number =>
      counterSlice.getSelectors().selectValue(state) * times,
  },
})

What would be the correct way to use selectTimes and provide a times value of 2?

To give a little more context, let's say I have a context which exposes a function with a parameter of multiplier. The param is then used to select a new value from the slice using the selectTimes.

Something like:

export function TimesMultiplierProvider() {
  const [multiplied, setMultiplied] = React.useState(0);

  const setMultiplier = React.useCallback(
    (times: number) => {
      // TODO: Use the new times value to update the multiplied state using `seelctTimes`
      // setMultiplied(newValue);
    }, 
    [setMultiplied]
  );

  const value = React.useMemo(() => { multiplied, setMultiplier }, [multiplied, setMultiplier]);
  return <TimesMultiplierContext.Provider value={value}>{children}</TimesMultiplierContext.Provider>;
}

So I think the answer is something along the lines of "you cannot use a selector (ie. a react hook) like that in a function call". But then is the only way to use selectTimes the following:

useSelector((state) => 
  counterSlice.selectors.selectTimes(state, 2)
)

If that is the only way to use selectTimes with a value of 2, that's fine it just feels a little awkward. Because unless I'm missing something (which is why I'm posting here), the state being passed to the counterSlice.selectors.selectTimes is the global state but somehow that becomes the slice state only when the selectTimes: (state, times = 1): number => function is invoked.

Last note: My actual use case is using the entity adapter for a slice and trying to figure out the correct relationship between the slice selectors and the selectors provided by the entity adapter.

[EskiMojo14]

Your slice selectors get wrapped so they can be called with the root state, depending on how you get them from your slice:

// .selectors uses rootState[slice.name] (technically slice.reducerPath, which defaults to slice.name)
counterSlice.selectors.selectTimes({ counter: { value: 1 } }, 2)

// getSelectors() with no arguments expects slice state only
counterSlice.getSelectors().selectTimes({ value: 1 }, 2) 

// explicit input selector will be called to get slice state
counterSlice.getSelectors((rootState: RootState) => rootState.foo).selectTimes({ foo: { value: 1 } }, 2)

They will still only ever be called with the slice state.

(rootState, ...args) => yourSliceSelector(selectSliceState(rootState), ...args)

[jd-carroll]

I understand that, my question was more about running the selector in the callback. But I'm getting that, that is not possible (I think obviously because it is technically a react hook and you can't run hooks conditionally / in callbacks)

So I think the most technically correct answer would be to dispatch an update to the slice with the user provided value in the callback, which will then in turn trigger an update to the selector. ... (?)

Either way, 🙏🏻 and apologies for delayed response.