Redux 설정 방법

리덕스도 앞서 말했듯 전역 상태 라이브러리 이므로, 설치를 해줘야하는 친구다 .
원래는 yarn add redux 랑 yarn add react-redux 두가지 설치해줘야하는데

👉 yarn add redux react-redux

이렇게 띄어쓰기로 구분하면 한번에 설치가 가능하다.

📖 폴더 정리

• Redux : 리덕스 관련 파일 모두 몰아넣을 폴더
• config : 리덕스 설정 관련 파일 전부 들어갈 폴더
• configStore.js : 중앙 State 관리소 -> 관련된 설정 코드들이 들어있다.
• modules : 중앙 State 관리소에서 관리하는 state의 그룹이 들어간다.
  ex) Todolist의 todos.js 파일

📖 폴더 위치

1. Src 폴더 안에 redux 폴더 생성
2. redux 폴더 안에 config 폴더 생성
3. config 폴더 안에 configStore.js 생성
4. 그 밑에 modules 폴더 생성

---

📖 설정 방법

1. API import

configStore 파일 안에

// 저장소 만들겠음 
import { createStore } from "redux";
// reducer들을 하나로 묶겠음 
import { combineReducers } from "redux";

이 두 친구들을 임포트 해준다.
중앙 state 저장소 생성하는 API랑 reducer들을 하나로 묶어주는 API를 불러와준 것.

임포트 해준 후에

// 1. reducer 생성
const rootReducer = combineReducers({이 안에는 객체의 형태인 변수가 들어갈 예정});
// 2. 중앙 관리소 생성 (store 생성)
const store = createStore(rootReducer);
					-> 함수의 인자로는 reducer의 묶음들이 들어감 ! ! 

// 3. 저장소 바깥으로 내보내기
export default store;

2. index.jsx랑 연결시키기

index.jsx 파일로 들어가서

provider 로 App 컴포넌트를 감싸줌으로써 중앙 데이터 관리소를 App 컴포넌트가 있는 곳 전체에서 쓸 수 있게 해준다.

임포트 해주는 건 언제나 잊지 말자