1

我有一个由大量类似条目组成的 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 文件中的选择器函数保留，所以我看不到如何使用闭包。

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

const selectorFunction = state => state

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

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

但这似乎有点难看。

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

感谢您的任何见解！

4

1 回答 1

5

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

const value = useSelector(state => selectValueByKey(state, props.key));
于 2020-07-09T18:13:56.220 回答