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

problem_hun·2023년 4월 1일
0

넷플릭스 클론코딩

목록 보기
4/10
post-thumbnail

전역적인 상태관리를 하기 위해 리덕스를 세팅해보자.

Provider

Provider는 리덕스를 사용 가능케 하는 컴포넌트이다. 전역 상태인 store를 장착하기 위해 Provider로 라우터를 감싸준다. store는 props로 넣어준다.

//index.js
import {Provider} from "react-redux";

<Provider>
    <BrowserRouter store={store}>
      <App />
    </BrowserRouter>
</Provider>

store

store를 Provider에 넣어주기 위해 store.js를 만들어준다.
미들웨어를 적용하기 위해 applyMiddleware와 비동기적 상태 변화를 위한 미들웨어 thunk를 적용해준다. 리덕스를 브라우저에서 쉽게 사용하기 위한 개발 툴 composeWithDevTools도 적용해준다.

//store.js
import { legacy_createStore as createStore, applyMiddleware } from '@reduxjs/toolkit';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

let store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

reducer

이번엔 store에 넣어주기 위한 리듀서로 rootReducer를 만들어주자.
API호출을 해보지 않아 어떤 리듀서가 필요할 지 모르므로 임시로 많은 리듀서를 하나로 합치는 combineReducers를 만들어주자. combineReducers의 안에는 객체가 들어가며 객체 안에 여러 리듀서가 들어간다.

//reducers/index.js
import { combineReducers } from '@reduxjs/toolkit';

export default combineReducers({});
profile
문제아

0개의 댓글