选择器从 redux 状态返回空数组，即使数组有值

问题描述

我有以下标准化的 redux 状态：

rootReducer: {
  blocks: {
    "key1": {
      id: "key1",beverages: [],// Array of objects
    }
  }
}

并且我正在尝试使用此选择器为具有 beverages id 的饮料选择 "key1" 的值：

export const getBlockBeverages = (state,blockId) => {
    console.log("selector",state.blocks[blockId].beverages);
    return state.blocks[blockId].beverages;
};

每当我向 beverages 数组中添加新饮料时，选择器都会被调用两次，第一次使用空数组，第二次使用正确值：

初始状态

selector []
selector []

添加新饮料：

selector []
selector [{/*beverage1*/}]

// Adding another beverage
selector []
selector [{/*beverage1*/},{/*beverage2*/}]

我真的很感激任何帮助/解释为什么选择器被调用并且块实例的 beverages 值是一个空数组。

以下是我正在使用的减速器的代码 - 我不知道在哪里可以改变原始状态，我从一开始就使用了 Immer 的产品，但问题仍然存在。然后我尝试使用 lodash.clonedeep 来确保我返回一个新状态，但选择器仍然记录那个空数组。

const blockReducer = (state = { id: "",beverages: [] },action) => {
    if (action.type === ADD_BEVERAGE_TO_BLOCK) {
        const { beverageId } = action.payload;
        const newBeverage = { id: uuid4(),beverageId };
        return produce(state,(draft) => {
            draft.beverages.push(newBeverage);
        });
    }
    return state;
};


const blocks = (state = {},action) => {
    const key = action.payload.key;
    if (key && (state[key] || action.type === CREATE_BLOCK)) {
        const instanceState = blockReducer(state[key],action);
        return produce(state,(draft: any) => {
            draft[key] = instanceState;
        });
    }
    return state;
};

在我添加新饮料时，为什么选择器返回空数组而不是长度为 0、1、2 等的数组有什么想法吗？我一无所知，将不胜感激任何帮助。

解决方法

问题出在我以错误方式使用的不同选择器中。

onclick="window.history.back();"

我使用了 createMapStateToProps 而不是 mapStateToProps：

export const makeGetBlockBeveragesLength = () => createSelector(
    (state,blockId) => getBlockBeverages(state,blockId),(blockBeverages) => blockBeverages.length,);

记录在其中一个日志中的空数组指的是较旧的状态（在本例中为初始状态）。

我修复了这个代码并且它有效：

const createMapStateToProps = (state,{ blockId }) => () => {
    const getBlockBeveragesLength = makeGetBlockBeveragesLength();
    return {
        length: getBlockBeveragesLength(state,};
};

export const Component = connect(createMapStateToProps)(MyComponent);

export const getBlockBeveragesLength = createSelector(
    (state,);