1-13 Redux 설정

yarn create react-app 프로젝트명 으로 만든 프로젝트상태에서

yarn add redux
yarn add react-redux
를 해줘야하는데 동시에 설치하기로한다.

yarn add redux react-redux

패키지설치가 완료되면 package.json에 설치된걸 확인 할 수있다.

폴더구조를 설정한다

src폴더에 redux/config폴더를 만든다.
그 폴더안에 configStore.js파일을 만든다.

redux 폴더아래로 modules폴더를 만든다.

redux폴더안에는 redux관련 코드를 모두 모아놓을 것
config폴더안에는 redux설정 관련 파일 전부 모아놓을 것
configStore파일안에는 중앙 state 관리소로써 설정코드들(.js형태로)들어있을 것
modules폴더안에는 state의 그룹이 들어갈 것(예를들어 todolist만들때 삭제여부라든지 제목이라든지를 만드는 todos.js파일등이 들어간다)

configStore.js파일안에

import {createStore} from "redux";
import {combineReducers} from "redux";

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store

를 작성한다.

index.js파일으로가서

<App/>을 감싸고있는 <React.StrictMode>태그를 지우고 <Provider>로 감싸준다.
import { Provider } from "react-redux"; 잊지말것
이 <Provider>는 store를 기반으로 지배권을 행사하는건데 여기서는
<App/>컴포넌트 전체에서 store에 접근할 수 있다는것을 말한다.
또
index.js파일에 store를 import한다. import store from './redux/config/configStore'
Provider태그안에 <Provider store={store}>로 해서 옵션추가

(처음에 <App store={store}>라고하는바람에 오류가나고 페이지에 렌더링이 안되길래 별짓을 다했다... 거의 한시간반을 잡아먹음)