[React]Redux 설치

💡 Redux란?

기존의 데이터 state들의 props 전달을 2path 까지는 쉽게 할수있었다.
어디서 props을 내려주는지, 디버깅이 힘들다 등의 단점이 있다.
이 state들을 한곳에 저장하여 쓰고싶은 컴포넌트에서 바로 불러올수있는데
이러한 props간의 연결을 단일 스토어로 모든 상태 트리 라이브러리인 Redux라고 부른다.

📁 폴더구조

src
-component  //라우팅 컴포넌트 
-container // 레이아웃 컴포넌트
-data  // 데이터 json 폴더
-lib //util 함수 폴더
-pages // 라우팅 연결 폴더
-redux // redux 관련 파일
-mocks // api 연결폴더

라이브러리 설치

⚙ redux

>npm install @reduxjs/toolkit

⚙ redux-toolkit

>npm install @reduxjs/toolkit

Redux 폴더구조 생성

폴더 생성

redux > configure, modules

파일생성

configure > configStore.js
modules > counter.js

💡 각 폴더와 파일의 역할

configure : 리덕스 설정과 관련된 파일들을 놓을 폴더
configure.js : '중앙 state 관리소'인 Store를 만드는 설정코드들이 있는 파일
modules : 우리가 만들고 필요한 State들을 모아둔 파일. 이것이 곧 하나의 모듈.

configure.js

• configureStore과 combineReducers을 불러온뒤 아래와같이틀을 만들어준다.
• configureStore 사용시 rootReducer을 감쌀때 reducer 을 정의 한뒤 감싼다.
  createStore 사용시 취소선이 그어지는것을 볼수있다.
  이때 redux-toolkit의 configstore의 사용을 권고하는것으로
  configstore 대신 createStore 사용해도 기능은 잘돌아가므로 둘 중하나를 선택하여 사용하면된다.

index.js

• provider, store 을 import 해온다.
• App을 Provider로 감싼뒤 Provider에 configureStore에서 내보내기한 store을 넣어준다.
  

💡 Redux 모듈 구성요소

initialState : 초기 상태값
Reducer : 변화를 일으키는 함수

Counter.js

Reducer 함수 생성

ConfigStore.js

Reducer함수 모듈을 스토어에 연결
(모듈, 스토어각각 분리 되어 있는 상태이기 때문에 우리가 만든 State를 스토어에서 꺼낼 수 없다. 우리가 만든 모듈을 스토어에 연결 시켜줘야 한다.)
이때, reducers는 묶어서 하나로 만든 reducer (modules를 모아놓음)