Combiné dos funciones reductoras, una que devuelve una lista de películas y otra que estoy creando para manejar la lógica que permite a los usuarios agregar una película a una 'lista de favoritos'.
import { combineReducers } from 'redux'; import movieReducer from './movieReducer'; import movieFavReducer from './movieFavReducer'; //combined reducers export default combineReducers({ movieReducer, movieFavReducer });Si no combino estos dos reductores y solo tengo movieReducer, obtengo todas las películas que tengo, sin embargo, en el momento en que combino estos dos, aparece el mensaje de error:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')Este es el código correspondiente:
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); He leído soluciones que sugieren que primero verifique si las películas contienen algo antes de mapear, ¿algo así como las movies?.map .
Por favor, ayúdame a resolver esto
Cuando usa combineReducers , no fusiona los estados de los reductores, sino que crea un nuevo reductor con estos estados anidados.
Al hacer combineReducers({ movieReducer, movieFavReducer }) obtendrá algo como esto:
{ "movieReducer": { "movies": [] }, "movieFavReducer": { "movies": [] } } Dicho esto, el problema parece estar en su implementación mapStateToProps . Prueba esto:
const mapStateToProps = state => { return { movies: state.movieReducer.movies, favorites: state.movieFavReducer.movies } } Más detalles sobre el uso de combineReducers en los documentos oficiales .