Как мне использовать react-redux 'useSelector' с дополнительной переменной? - PullRequest
0 голосов
/ 09 июля 2020

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

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 использует неизменяемый журнал обновлений c, поэтому я могу назначить изменение состояния напрямую)

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"]

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

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

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

1 Ответ

1 голос
/ 09 июля 2020

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

const value = useSelector(state => selectValueByKey(state, props.key));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...