React-Redux访问mapStateToProps中的动态筛选状态-重新提交灾难

我有一个功能组件，它被传递关于从redux存储中提取什么的指令。 使用

mapstatetops=（state，ownProps）

，我可以很高兴地从state（store）中提取所需的项目，但代价是整个状态树中的任何更改都会触发重新运行mapstatetops和数以百万计的重新渲染器

让我打开行李

以下是部分门店的快照：

{
  settings: {...stuff...},
  projects: [...stuff...],
  definitions: [...stuff...],
  themes: [...stuff...],
  surfaces: {
    '6': {                                   <--- VARIABLE PASSED TO COMPONENT
      surface: {
        STRIP: [..stuff..],
        GLOBAL: {                            <--- CATEGORY PASSED TO COMPONENT
          DISPLAY: {...stuff...},
          ASSIGNMENT: {                      <--- LIST OF REQUIRED OBJECTS HAS 
            A_TRACK: {                       SUBCATEGORY AND TARGET (A_TRACK etc...)
              value: 0,
              type: 'switch',
              label: 'TRACK'                 
            },
            A_SEND: {                        <--- ANOTHER OBJECT I NEED TO GET
              value: 0,
              type: 'switch',
              label: 'SEND'
            },
            A_PAN: {
              value: 0,
              type: 'switch',
              label: 'PAN'
            },
          },
        FADER_BANKS: {...stuff...},  
        STATUS: {...stuff...},
        LOTS_MORE_STUFF

这项工作是在一个简单的函数中完成的：

const getItemsFromState = (subState, items)=>{
    let groupItems=[]
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        const base = subState[item.parent];
        
        let groupItem = base[item.group][item.target]
        groupItems.push({...groupItem, target: item.target})
    }
    return groupItems
} 

我尝试使用重新选择和重新选择，而不是上面的getItemsFromState函数， 但结果都是一样的。该树中的任何更改（从曲面[6]开始）都会触发mapsStateToProps和重新渲染

一定有办法，但我想不出来。我尝试使用

AreStateSqual

，但它只提供

nextState

和

prevState

，我需要

ownProps

来计算相等性。我可能可以使用

areStatePropsEqual

，但这只有在不必要地重新计算

MapStateTrops

后才能起作用

---

一定有办法

getItemsFromState

每次运行时都会创建一个新的

groupItems

数组引用。它将在每次分派的操作之后调用。因为，您的代码每次都强制React-Redux重新渲染

这就是为什么，通常使用重新选择的

createSelector

。如果您在这里使用“重新选择”没有帮助，则可能是选择器设置不正确，但我需要查看具体示例以提供建议

这也是为什么

如果您使用的是功能组件，我建议您也使用

useSelector

而不是

connect

const mapStateToPropy = (state, ownProps) => {
    return {
        groupItems: getItemsFromState(state.surfaces[ownProps.portId].surface, ownProps.items)
    }
}

const getItemsFromState = (subState, items)=>{
    let groupItems=[]
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        const base = subState[item.parent];
        
        let groupItem = base[item.group][item.target]
        groupItems.push({...groupItem, target: item.target})
    }
    return groupItems
} 

surfaces[6].surface[GLOBAL][ASSIGNMENT][A_TRACK]
surfaces[6].surface[GLOBAL][ASSIGNMENT][A_SEND]