如何将react-redux 'useSelector' 与附加变量一起使用？

Question

我有一个由大量相似条目组成的 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，所以我的reducer是这种形式（注意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)

但是我如何传递密钥呢？

官方hooks 文档建议使用闭包来传递附加变量

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 文件中的选择器函数保留在我的 redux 文件中，所以我看不到如何使用闭包。

我想我可以从选择器函数中传递整个状态

const selectorFunction = state => state

然后将其视为我的 React 组件中的一个对象并在那里键入它

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

但这看起来有点丑陋。

如果这是要走的路，myVar我的 Redux 状态中的任何字段发生变化时是否会更新？我有点不清楚useSelector 相等性测试机制是如何工作的——它说它使用“严格相等”，所以如果我的状态对象的任何部分发生变化（即，如果字段“m20_24”发生变化），那么myVar将是更新？

感谢您的任何见解！

Answer 1

将匿名选择器传递给useSelector，然后调用其中的实际选择器：

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