React Redux TypeError: Invalid attempt to spread non-iterable instance

manpreet Best Answer 2 years ago

Hi I'm using redux persist to persist and rehydrate my app. This is my productsReducer:

const initialState = {
  products: [],
  id: [],
  qty: [],
  numOfItems: 0,
  totalPrice: 0,
  status: '',
  showPopup: false
};

const productsReducer = (state = initialState, action) => {
  let updatedId = [...state.id];
  let updatedQty = [...state.qty];
  let index = updatedId.indexOf(action.id);

  switch (action.type) {
    case actionTypes.FETCH_PRODUCTS_REQUEST:
      return {
        ...state,
        status: action.status
      }

    case actionTypes.FETCH_PRODUCTS_SUCCESS:
      return {
        ...state,
        status: action.status,
        products: action.products
      }

    case actionTypes.TOGGLE_POPUP:
      return {
        ...state,
        showPopup: !state.showPopup
      }
    };
    .....
}

For reasons unknown to me, my persist/REHYDRATE actions show one key {showPopup: true} for productsReducer.

action     
{type: "persist/REHYDRATE", payload: {…}, err: undefined, key: "root", asyncDispatch: ƒ}
  asyncDispatch: ƒ asyncDispatch(asyncAction)
  err: undefined
  key: "root"
  payload:
  productsReducer: {showPopup: true}
  userReducer: ...
  _persist: {version: -1, rehydrated: true}
  __proto__: Object
  type: "persist/REHYDRATE"

After that FETCH_PRODUCTS_REQUEST, show productsReducer: {showPopup: true} too. This shows that the rehydration replaced productsReducer state in the beginning.

action FETCH_PRODUCTS_REQUEST
  prev state 
    {productsReducer: {…}, userReducer: {…}, _persist: {…}}
    productsReducer: {showPopup: true}

When the fetched products calls productsReducer, it tried to do let updatedId = [...state.id]. But that didn't work since productsReducer only have the state showPopup. That's when it threw the below error...

TypeError: Invalid attempt to spread non-iterable instance.

I suspect the fault lies in persist/REHYDRATE. How can I reset the app or reset rehydration then?