React-Redux

1) Redux를 React에 바인딩 해보기 (react-redux)

1-1) React에서 Redux를 사용하는 이유

1) 전역 상태 관리

• 여러 컴포넌트에 걸쳐 있는 변화 / 멀리 떨어진 컴포넌트 간의 통신이 어려우니까
  
• 멀리 떨어진 컴포넌트끼리 상태값을 교환할 때 복잡해지는 데이터 흐름이 전역 스토어의 개입을 통해 간결해짐 ⇒ 컴포넌트와 스토어가 다이렉트로 연결됨
  

2) props drilling

• but, redux에 대해 질문이 들어왔을 때 props drilling이라고만 답하면 오답
  

1-2) react-redux가 우리를 위해 해주는 일

💬 Redux의 여러 기능들을 React의 API에 맞도록 감싸 놓은 UI Binding 라이브러리

• ex. store → Provider 컴포넌트를 사용해 전역에 store 주입 (내부적으로 context api 사용)
• ex. useSelector, useDispatch 등 React 전용 hooks 제공

:: redux API

• createStore : store를 생성
• combineReducer : 여러 개의 slice를 결합하여 하나의 root reducer를 만듬
• applyMiddleware : reducer 이전 순서에서 실행할 middleware를 정의

:: react-redux API

• Provider : react app 전체에 제공할 store를 주입하는 장소
• useSelector : store를 가져오는 역할 (state)
• useDispatch : action을 reducer로 보내는 역할 (setState)

1-3) Redux 패턴에 맞게 프로젝트 폴더 구조 작성하기

:: Ducks pattern

• redux의 구성 요소인 Action Type, Action, Reducer 셋을 모두 하나의 파일 안에서 관리하는 패턴.
• 구조 중심으로 파일을 나누는 것이 아니라 기능별로 나누는 방식. 기존에는 action type, action, reducer 구조에 맞게 각각 폴더 안의 파일로 관리했음.

  └── redux
      ├── index.js   // root reducer
      ├── counter.js // 기능 1
      ├── modal.js   // 기능 2
      └── user.js    // 기능 3