[넷플릭스 클론코딩] 리듀서 세팅

앞에서 만든 리덕스를 적용하기 위해 리듀서를 만들어보자.

API로 영화정보를 받아오는 파일에서는 영화정보 업데이트 디스패치를 작성해 준다.

dispatch({
  type: 'GET_MOVIE_SUCCESS',
  payload: {
    popularMovies: popularMovies.data,
    topRatedMovies: topRatedMovies.data,
    upcomingMovies: upcomingMovies.data,
  },
});

홈화면에서 인기 영화, 평점 높은 영화, 개봉 예정 영화를 출력하려고 하기 때문에 이 세가지 상태를 업데이트 시켜주는 리듀서를 만들어본다.

// 초기 빈 객체 상태의 영화들
let initialState = {
  popularMovies: {},
  topRatedMovies: {},
  upcomingMovies: {},
};

// reducer는 state와 action을 인자로 받는 함수!
function movieReducer(state = initialState, action) {
  let { type, payload } = action;
  switch (type) {
    case 'GET_MOVIE_SUCCESS':
      return {
        ...state,
        popularMovies: payload.popularMovies,
        topRatedMovies: payload.topRatedMovies,
        upcomingMovies: payload.upcomingMovies,
      };
    default:
      return { ...state };
  }
}

export default movieReducer;

그리고 리듀서들을 하나로 합친 combineReducers에 위의 리듀서를 movie라는 키값으로 추가해 준다.

import movieReducer from './movieReducer';

export default combineReducers({ movie: movieReducer });