Cannot read properties of undefined (reading ‘map’) after adding combineReducers

I combined two reducers functions one returning a list of movies and one that I am building to handle the logic enabling users to add a movie to a ‘favorites list’.

import { combineReducers } from 'redux';
import movieReducer from './movieReducer';
import movieFavReducer from './movieFavReducer';

//combined reducers 
export default combineReducers({ movieReducer, movieFavReducer });

If I do not combine these two reducers and just have movieReducer I get all the movies I have, however, the moment I combined these two I get the error message:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

This is the relevant code:

import React from 'react';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/movieActions';
import MovieListItem from './MovieListItem';
import MovieFooter from './MovieFooter';

const MovieList = (props)=> {
    const{ movies, favorites } = props
    // const movies = [];

    return (
        <div className="col">
            <table className="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Director</th>
                    <th>Genre</th>
                    <th>Metascore</th>
                    <th></th>
                </tr>
                </thead>

                <tbody>
                    {
                        props.movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
                    }
                </tbody>
            </table>
            
            <MovieFooter totalMovies={movies.length}/>
        </div>
    );
}

//reaching into state and getting specific properties I want
const mapStateToProps = state => {
    return {
        movies: state.movies,
        favorites: state.movies
    }
}

export default connect(mapStateToProps, actionCreators) (MovieList);

I have read solutions suggesting that I first check if movies contains anything before mapping, so something to the tune of movies?.map, the issue is that this nothing, despite the fact that movies are passed down when I don’t combine my reducers.

Please help me figure this out

Answer

When you use combineReducers, it doesn’t merge the reducers states, but creates a new reducer with these states nested.

By doing combineReducers({ movieReducer, movieFavReducer }) you will have something like this:

{
  "movieReducer": {
    "movies": []
  },
  "movieFavReducer": {
    "movies": []
  }
}

That said, the issue seems to be on your mapStateToProps implementation. Try this:

const mapStateToProps = state => {
    return {
        movies: state.movieReducer.movies,
        favorites: state.movieFavReducer.movies
    }
}

More details about the combineReducers usage at the official docs.