How do I use react-redux 'useSelector' with an additional variable?

Question

I have a redux (sub) state that consists of a large number of similar entries.

export type PartnerCalculatorStateShape = {
    m16_19:number;
    m20_24:number;
    m25_34:number;
    m35_44:number;
    m45_64:number;
    m65_plus:number;
    f16_19:number;
    f20_24:number;
    f25_34:number;
    f35_44:number;
    f45_64:number;
    f65_plus:number;

};

I am using the Redux Toolkit so my reducer is of this form (note that Redux Toolkit uses immutable update logic, so I can assign modify the state directly)

type PartnerCalculatorPayload = {
  key:string;
  value:number;
}

    export const partnerCalculatorSlice = createSlice({
      name: 'PartnerCalculator',
      initialState,
      reducers: {
        partnerCalculatorValueReceived(state, action: PayloadAction<PartnerCalculatorPayload>) {
          state[action.payload.key] = action.payload.value;
        }
      }
    });

I'm a bit stuck on how to use useSelector. What I want to do is have a selector function in my Redux file, something like this

export const selectorFunction = (state,key) => state[key]

where key would be m20_24, for example. Then I would use that selector function in my React component

const myVar = useSelector(selectorFunction)

But how do I pass in the key?

The official hooks documentation recommends using closure to pass additional variables

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

However. useSelector will be in my React component and I want to keep the selector function I pass to useSelector inside my redux file, so I can't see how to use closure.

I suppose I could just pass the entire state out from my selector function

const selectorFunction = state => state

and then treat it as an object in my React component and key into it there

const myState = useSelector(selectorFunction)
const myVar = myState["m20_24"]

but that seems kind of ugly.

If that's the way to go, would myVar update anytime any of the fields in my Redux state changed? I'm a bit unclear as to how the useSelector equality testing mechanism works -- it says it uses 'strict equality', so if any part of my state object changed (that is, if the field 'm20_24' changed) then myVar would be updated?

Thanks for any insights!

markerikson · Accepted Answer · 2020-07-09 18:13:56Z

7

Pass an anonymous selector to useSelector, and then call the actual selector inside of there:

const value = useSelector(state => selectValueByKey(state, props.key));

answered Jul 9, 2020 at 18:13

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hassaan Tauqir Over a year ago

Just wondering. Is it possible to use an HOF approach here? Something like useSelector(selectorHOF(props.key)); and then const selectorHOF = key => state => state.todos[key];

markerikson Over a year ago

Sure, that's legal syntax if you want to do that. I personally prefer the approach I showed and find it more readable, but that's up to you.

Collectives™ on Stack Overflow

How do I use react-redux 'useSelector' with an additional variable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related