Selector returns empty array from the redux state, even though the array has values

Question

I have the following normalized redux state:

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

and I'm trying to select the value of beverages for beverage with the id of "key1" using this selector:

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

Whenever I add a new beverage into the beverages array, the selector gets called twice, first time with an empty array, second time with proper values:

Initial state

selector []
selector []

Adding new beverage:

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

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

I'd really appreciate any help/explanation why does the selector get called and beverages value for the block instance is an empty array.

Below is the code for reducers I'm using - I don't see where I could be mutating the original state, I used Immer's produce from the beginning and the problem is still present. Then I tried to use lodash.clonedeep to make sure that I return a new state, but the selector still logs that empty array.

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;
};

Any ideas why the selector returns empty array instead of array of length 0, 1, 2 etc. as I'm adding new beverages? I'm clueless and will appreciate any help.

@HMR Value of `blockId` is "key1" each time the selector gets called. — mtbno, Feb 24 '21 at 12:31
this is complex to check without the entire code order, can you upload this one to a github or codesanbox to help you out? — crizcl, Feb 24 '21 at 13:42
@crizcl I will create a sample repo and try to simulate the problem, I'll let you know — mtbno, Feb 24 '21 at 14:52
@crizcl I created a codesandbox and everything worked fine in it, then I found what caused the problem, see the answer. Thank you for your help and time. — mtbno, Feb 26 '21 at 22:30
@mtbno sure man! sometimes one gets blocked, but i'm happy you could solve your problem!, nice coding. — crizcl, Mar 01 '21 at 18:33

mtbno · Accepted Answer · 2021-02-26T22:29:10.283

The problem was in a different selector that I had been using in a wrong way.

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

and instead of mapStateToProps I used createMapStateToProps:

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

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

The empty array logged in one of the logs refers to an older state (the initial state in this case).

I fixed the code to this and it works:

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

const mapStateToProps = (state, { blockId }) => ({
    length: getBlockBeveragesLength(state, blockId),
});

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

Selector returns empty array from the redux state, even though the array has values

1 Answers1