如何使用带有附加变量的react-redux useSelector‘？

admin

我有一个由大量相似条目组成的redux (sub)状态。

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是如何工作的--它说它使用“严格相等”，所以如果我的状态对象的任何部分发生了变化(也就是，如果字段“m20_24”发生了变化)，那么myVar会被更新吗？

感谢你的见解！

转载请注明出处:http://www.insurance-fj.com/article/20230526/950129.html