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
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.