CODEWITHSUNDEEP
reduxreact-reduxjsxreducers
JustMatthew
JustMatthew

Reputation: 372

How to initialize reducers? Reducer returns undefined

I'm totally new with Redux and reducers. I can't make my first code work. Can anybody tell me why (index.js) refer to BooksReducer? I have no such a prop, component, or file. And it throws me an error like this: "Uncaught Error: Reducer "books" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state." How can I initialize it?

reducer_book.js:

export default  function(){
    return
    [
      {title: 'Crash bandicoot'},
      {title: 'Crash bandicoot 2: Cortex strikes back'},
      {title: 'Crash bandicoot 3: Warped'},
      {title: 'Crash Team Racing'},
      {title: 'Crash Bash'}
    ]
}

index.js:

   const rootReducer = combineReducers({
   books: BooksReducer
   });

    export default rootReducer;

App.js:

 export default class App extends Component {
    render() {
      return (
        <div>
          <BookList />
       </div>
     );
   }
  }

book_list.js:

   class BookList extends Component{

     renderList(){
       return this.props.books.map((book) => {
           return( 
            <li key={book.title} className="list-group-item">{book.title}</li>
        );
      });
     }


   render(){
      return(
        <ul className="list-group col-sm-4">
         {this.renderList()}
        </ul>
        )
    }
   }

    function mapStateToProps(state){
      return {
        books: state.books
    };
   }

   export default connect(mapStateToProps)(BookList);

Upvotes: 0

Views: 1250

Answers (1)

markerikson
markerikson

Reputation: 67597

It looks like you've got a newline after your return statement in the reducer, so that's probably going to result in Javascript interpreting it as just return;, rather than return [ ];. Try moving the open bracket for the array up to the same line as the return keyword.

Upvotes: 2

Related Questions