CODEWITHSUNDEEP
javascriptreactjsredux
Naveen Kashyap
Naveen Kashyap

Reputation: 87

when mapping redux state into props into component it's returning undefined

i'm calling a api and getting my data and setting it to redux state successfully but when i'm mapping it to my component it's first returning undefined then it's calling the the api but i'm using redux-thunk for it

this is my header component 

export class header extends Component {
  componentDidMount() {
    this.props.addUpcomingMovies();
  }

  render() {
    const Movies = this.props.popularMovies.map(movie => (
      <div key={movie.id} className="header-slide-container">
        <div className="header-slide">
          <img
            src={`https://image.tmdb.org/t/p/original${movie.poster_path}`}
            alt=""
          />
          {(() => {
            if (!movie.title) {
              return null;
            }
            return <Title movie={movie} />;
          })()}
          {(() => {
            if (!movie.original_title) {
              return null;
            }
            return <OriginalTitle movie={movie} />;
          })()}
          {(() => {
            if (!movie.original_name) {
              return null;
            }
            return <OriginalName movie={movie} />;
          })()}
        </div>
      </div>
    ));
    return (
      <div className="header">
        <div className="header-container">
          <div className="header-slider-wrapper">
            {console.log(this.props.popularMovies)}
            {<Movies />}
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  popularMovies: state.upComingMovies.movies
});

export default connect(
  mapStateToProps,
  { addUpcomingMovies }
)(header);

this is my upcoming movie reducer

const upComingMovie = (state = [], action) => {
  switch (action.type) {
    case "ADD_UPCOMING_MOVIES":
      console.log('reducers');

      return {
        ...state,
        movies:action.payload
      }
    default:
      return state;
  }
};
export default upComingMovie;

combining reducers 

import upComingMovie from './upcomingMovies';
import {combineReducers} from 'redux';
const allReducers = combineReducers({
    upComingMovies:upComingMovie
})
export default allReducers

upcoming movie action

export const addUpcomingMovies = () => dispatch => {
  console.log("fetching");

  fetch("https://api.themoviedb.org/3/trending/all/week?api_key=25050db00f2ae7ba0e6b1631fc0d272f&language=en-US&page=1")
    .then(res => res.json())
    .then(movies =>
      dispatch({
        type: "ADD_UPCOMING_MOVIES",
        payload: movies
      })
    );
};

this is my store

import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import allReducers from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(allReducers,initialState,compose(applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
export default store;

Upvotes: 0

Views: 181

Answers (2)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Your reducer is not object, your reducer is an array

const upComingMovie = (state = [], action) => {}
// ____________________________^

But your are using object

case "ADD_UPCOMING_MOVIES":

  return { // <--------------- this is an object notation
    ...state,
    movies:action.payload
  }

Solution

const initialState = {
    movies: []
}
const upComingMovie = (state = initialState , action) => {}

Upvotes: 2

Clarity
Clarity

Reputation: 10873

Your initialState is wrong, it'd be {movies: []}:

const initialState = { movies: []};

// ...
const upComingMovie = (state = initialState, action) => {
// ...

Also use the same initial state in your store.

Upvotes: 1

Related Questions