CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
dan_boy
dan_boy

Reputation: 2009

How to reslove: Unhandled Rejection (TypeError): state.xx is not iterable

I send a number of files and some other data via redux and axios to my backend. However, when I do so, I get the following error message Unhandled Rejection (TypeError): state.story is not iterable. Although the error occurs in my react js fronted, the data is successfully sent to my backend. I checked my entire reducers what is making state.story not iteratable, but i dont see it. Please see below my reducers for stroy:

const initialState = {
  story: [],
  isFetching: "idle",
  count: null,
  next: null,
  previous: null,
};

export default function (state = initialState, action) {
  switch (action.type) {
case GET_STORY_REQUEST:
      return {
        ...state,
        isFetching: "loading"
      };

case GET_STORY_SUCCESS:
      return {
        ...state,
        story: action.payload,
        isFetching: "success",
        count: action.payload.count,
        next: action.payload.next,
        previous: action.payload.previous,
      };

case GET_STORY_FAILURE:
      return {
      isFetching: "failure"
      };

case GET_SINGLE_STORY:
     return {
        ...state,
        story: state.story.filter(story => story.id !== action.payload)
      };

case DELETE_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id !== action.payload)
      };

case EDIT_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id  !== action.payload)
      };

case ADD_STORY:
      return {
        ...state,
        story: [...state.story, action.payload]
      };

    default:
      return state;
  }
}

I now wonder how i can make state.story iterable? I am happy for any hint.

Upvotes: 0

Views: 2320

Answers (2)

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23160

It looks like action.payload is an object inside your reducer's GET_STORY_SUCCESS case as you're also using its count, next, and previous property on the next few lines.

Maybe the story array is on another property, like action.payload.story, action.payload.data?

case GET_STORY_SUCCESS:
  return {
    ...state,
    story: action.payload, // <= story is no longer an array
    isFetching: 'success',
    count: action.payload.count,
    next: action.payload.next,
    previous: action.payload.previous,
  };

If you're trying to create a new array by spreading an object, the error message is "Uncaught TypeError: XXX is not iterable"

let emptyArray = []
console.log([...emptyArray, 1, 2])
// => [1, 2]

// BUT
let object = {}
console.log([...object, 1, 2])
// => Uncaught TypeError: object is not iterable

Upvotes: 1

Dhiraj Baruah
Dhiraj Baruah

Reputation: 192

I think you are iterating over object. Print story in the console and check whether it is an array or an object. I think you need to iterate over story.data or something like this.

Upvotes: 1

Related Questions