React Redux: How to add a property to an empty object in the reducer

Question

const INITIAL_STATE = {
  editedProduct: {},
};

reducer.js

   case ADD_SWATCH:
      const typeSwatch = action.payload;
      return merge(state, {
        editedProduct: {
          ...state.editedProduct,
          [typeSwatch]: [
            ...state.editedProduct[typeSwatch],
            {
              dimSwtNo: state.editedProduct[typeSwatch].length
                ? state.editedProduct[typeSwatch].length + 1
                : 1,
            },
          ],
        },
      });

I get an error: Possible Unhandled Promise Rejection (id: 0): TypeError: Invalid attempt to spread non-iterable instance

The problem is in this line

...state.editedProduct[typeSwatch],

Refers to a property that has not yet been initialized.

How could I solve this problem?

Answer 1

As the error suggests, you can't spread a null / undefined value. The simplest approach here is to use a default value in scenarios where the property has not been set yet eg

...(state.editedProduct[typeSwatch] || [])

Since you use this value in a couple of places it would make sense to create a variable further up.