如何将 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)

但是如何传入密钥呢？

official hooks documentation推荐使用闭包来传递额外的变量

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 equality testing mechanism 是如何工作的——它说它使用 'strict equality'，所以如果我的状态对象的任何部分发生变化（也就是说，如果字段 'm20_24' 发生变化) 那么 myVar 会被更新吗？

感谢您的任何见解！

Answer 1

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

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

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

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

reactjs

redux

react-redux

react-hooks

redux-toolkit