Как мне использовать react-redux 'useSelector' с дополнительной переменной?

У меня есть сокращенное (под) состояние, которое состоит из большого количества похожих записей.

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;

};

Я использую Redux Toolkit, поэтому мой редуктор имеет эту форму (обратите внимание, что Redux Toolkit использует неизменяемое обновление логика, поэтому я могу назначить изменение состояния напрямую)

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;
        }
      }
    });

Я немного застрял в том, как использовать useSelector. Что я хочу сделать, так это иметь функцию селектора в моем файле Redux, что-то вроде этого

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

где key будет m20_24, например. Затем я бы использовал эту функцию селектора в своем компоненте React.

const myVar = useSelector(selectorFunction)

Но как передать ключ?

В официальной документации по хукам рекомендуется использовать замыкание для передачи дополнительных переменных.

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>
}

Тем не мение. useSelector будет в моем компоненте React, и я хочу сохранить функцию селектора, которую я передаю useSelector в моем файле redux, поэтому я не вижу, как использовать закрытие.

Полагаю, я мог бы просто передать все состояние из своей функции выбора.

const selectorFunction = state => state

а затем рассматривать его как объект в моем компоненте React и вводить его там

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

но это кажется некрасивым.

Если это так, будет ли myVar обновляться каждый раз при изменении любого из полей в моем состоянии Redux? Мне немного непонятно, как механизм проверки равенства useSelector работает - в нем говорится, что используется «строгое равенство», поэтому, если какая-либо часть моего объекта состояния изменилась (то есть, если изменилось поле «m20_24»), то myVar будет обновлено?

Спасибо за любые идеи!


reactjs redux react-redux react-hooks redux-toolkit
person Cerulean    schedule 09.07.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Передайте анонимный селектор useSelector, а затем вызовите фактический селектор внутри него:

const value = useSelector(state => selectValueByKey(state, props.key));
person markerikson    schedule 09.07.2020
comment
Просто интересуюсь. Можно ли здесь использовать подход HOF? Что-то вроде useSelector(selectorHOF(props.key));, а затем const selectorHOF = key => state => state.todos[key]; - person Hassaan Tauqir; 09.07.2020
comment
Конечно, это законный синтаксис, если вы хотите это сделать. Я лично предпочитаю подход, который я показал, и считаю его более читаемым, но это зависит от вас. - person markerikson; 09.07.2020