title: React - Redux App: "Invalid attempt to spread non-iterable instance" Issue
body: <blockquote>
    <p>At the beginning, that sample app was working properly. I could see
    data that I inputted over browser page and database. At now, I can see
    the data only via the database, the browser doesn't show data and getting this
    error additionally: "Invalid attempt to spread non-iterable
    instance".</p>
  </blockquote>
  
  <p>There is the sample code :</p>
  
  <p><strong>projectActions.js</strong></p>
  
  <pre><code>import {FETCH_BOOK, CREATE_BOOK, DELETE_BOOK} from '../actions/projectTypes';
  import axios from 'axios';
  
  const apiUrl = 'http://api/books';
  
  export const createBookSuccess =  (data) =&gt; {
    return {
      type: CREATE_BOOK,
      payload: {
        _id: data._id,
        author: data.author,
        publication: data.publication,
        publisher: data.publisher
      }
    }
  };
  
  export const deleteBookSuccess = _id =&gt; {
    return {
      type: DELETE_BOOK,
      payload: {
        _id
      }
    }
  };
  
  export const fetchBook = (books) =&gt; {
    return {
      type: FETCH_BOOK,
      books
    }
  };
  
  export const createBook = ({ author, publication, publisher }) =&gt; {
    return (dispatch) =&gt; {
      return axios.post(`${apiUrl}`, {author, publication, publisher})
        .then(response =&gt; {
          dispatch(createBookSuccess(response.data))
        })
        .catch(error =&gt; {
          throw(error);
        });
    };
  };
  
  export const deleteBook = _id =&gt; {
    return (dispatch) =&gt; {
      return axios.delete(`${apiUrl}/${_id}`)
        .then(response =&gt; {
          dispatch(deleteBookSuccess(response.data))
        })
        .catch(error =&gt; {
          throw(error);
        });
    };
  };
  
  export const fetchAllBooks = () =&gt; {
    return (dispatch) =&gt; {
      return axios.get(apiUrl)
        .then(response =&gt; {
          dispatch(fetchBook(response.data))
        })
        .catch(error =&gt; {
          throw(error);
        });
    };
  };
  </code></pre>
  
  <p><strong>projectReducer.js</strong></p>
  
  <pre><code>import {CREATE_BOOK, DELETE_BOOK, FETCH_BOOK} from '../actions/projectTypes';
  
  const projectReducer = (state = [], action) =&gt; {
    switch (action.types) {
      case CREATE_BOOK:
        return [...state, action.payload];
      case DELETE_BOOK:
        let afterDelete = state.filter(book =&gt; {
          return book._id !== action.payload._id
        });
        return {
          ...state,
          state: afterDelete
        }
      case FETCH_BOOK:
        return action.books;
      default:
        return state;
    }
  }
  
  export default projectReducer;
  </code></pre>
  
  <p><strong>rootReducer.js</strong></p>
  
  <pre><code>import books from './projectReducer';
  import {combineReducers} from 'redux';
  
  const rootReducer = combineReducers({
      books: books
  });
  
  export default rootReducer;
  </code></pre>
  
  <p><strong>BookListElement.js</strong></p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import BookList from '../components/bookList';
  import {deleteBook} from '../store/actions/projectActions';
  
  const BookListElement= ({books, deleteBook}) =&gt; {
    if(!books.length) {
      return (
        &lt;div&gt;
          No Books
        &lt;/div&gt;
      )
    }
    return (
      &lt;div&gt;
        {books.map(book =&gt; {
          return (
            &lt;BookList book={book} deleteBook={deleteBook} key={book._id} /&gt;
          );
        })}
      &lt;/div&gt;
    );
  }
  
  const mapStateToProps = state =&gt; {
    return {
      books: state.books
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      deleteBook: _id =&gt; {
        dispatch(deleteBook(_id));
      }
    };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(BookListElement);
  </code></pre>
  
  <p><strong>bookList.js</strong></p>
  
  <pre><code>import React from 'react';
  
  const styles = {
    borderBottom: '2px solid #eee',
    background: '#fafafa',
    margin: '.75rem auto',
    padding: '.6rem 1rem',
    maxWidth: '500px',
    borderRadius: '7px'
  };
  
  const BookList =  ({ book: { author, publication, publisher, _id }, deleteBook }) =&gt; {
    return (
      &lt;div style={styles} key={_id}&gt;
        &lt;h2&gt;{author}&lt;/h2&gt;
        &lt;p&gt;{publication}&lt;/p&gt;
        &lt;p&gt;{publisher}&lt;/p&gt;
        &lt;button className="btn waves-effect waves-light" type="submit" name="action" onClick={() =&gt; {deleteBook(_id)}}&gt;
          &lt;i className="large material-icons"&gt;delete_forever&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default BookList;
  </code></pre>
  
  <p><strong>bookCreate.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  
  class BookCreate extends Component {
    state= {
      author: '',
      publication: '',
      publisher: ''
    }
  
    handleChange = (e) =&gt; {
      this.setState({
        [e.target.id]: e.target.value
      });
    }
  
    handleSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.createBook(this.state)
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;form onSubmit={this.handleSubmit} className="white" autoComplete="off"&gt;
            &lt;h5 className="grey-text text-darken-3"&gt;Create New Book&lt;/h5&gt;
            &lt;div className="input-field"&gt;
              &lt;label htmlFor="author"&gt;Author&lt;/label&gt;
              &lt;input type="text" id="author" onChange={this.handleChange}/&gt;
            &lt;/div&gt;
  
            &lt;div className="input-field"&gt;
              &lt;label htmlFor="publication"&gt;Publication&lt;/label&gt;
              &lt;input type="text" id="publication" onChange={this.handleChange}/&gt;
            &lt;/div&gt;
  
            &lt;div className="input-field"&gt;
              &lt;label htmlFor="publisher"&gt;Publisher&lt;/label&gt;
              &lt;input type="text" id="publisher" onChange={this.handleChange}/&gt;
            &lt;/div&gt;
  
            &lt;div className="input-field"&gt;
              &lt;button className="btn pink lighten-1 z-depth-0"&gt;Create&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default BookCreate;
  </code></pre>
  
  <blockquote>
    <p>I checked the code a few times and read an older post about this issue
    but I didn't find any solution as a junior. That would be great if you
    say what did I miss.</p>
  </blockquote>
  
  <p>EDIT: Added view.js file as bookList.js .</p>