TIL2 | Redux 개념과 React 적용 가이드

리액트 프로젝트 규모가 커지면 자식으로 넘겨주어야 하는 props의 깊이가 점점 깊어진다.
크지도 않은 플젝에서도 느껴봤다... 메인 컴포넌트 -> 잡필터 -> 드롭다운s -> 체크박스로 props 계속 전달.. 헥헥.
Redux를 쓰면 "어디에서든" 내가 원하는 state를 사용할 수 있다! 행-복.

Redux is a library for managing global application state.

Redux의 작동 과정

• action: 상태에 변화가 필요할 때 하나의 action을 발생시킨다. type값(필수)과 payload(선택)를 가지고 있는 object이다. type은 문자열이고, 어떤 값을 변화시킬지 정해서 reducer에게 알려준다. 보통 "domain/eventName"으로 작명.
• action creator: 파라미터를 받아와서 action객체로 만들어주는 함수.
• reducer: 상태에 변화를 일으키는 함수. 현재 state와 action을 파라미터로 받아서 새로운 state를 만들어서 반환한다. 예외 상황에서는 보통 현재 state를 그대로 반환한다. 여러 개의 sub reducer 생성하고 합쳐서 root reducer 만들 수도 있다. like event listners, when they hear an action they are interested in, they update the state.
• store : 전역에서 상태 관리 하는 저장소. 리덕스에서는 한 애플리케이션 당 하나 만든다. 현재의 앱 상태와 리듀서가 들어 있다.
• dispatch() : store의 내장 함수. action을 발생시킨다. (triggering an event) 보통 action creator를 호출하여 action을 매개변수로 받아서 reducer를 호출하고, 해당 action을 처리하는 로직에 따라 새로운 상태를 만든다.
• subscribe() : store의 내장 함수. 보통 리액트에서는 connect()를 사용하여 리덕스 스토어의 상태를 구독한다. (스토어 변경 내용을 감지하여 개별 컴포넌트 state 갱신)
• selector : store state value 중 특정 부분을 추출하는 함수.

리덕스 규칙

Redux expects that all state updates are done immutably.

• 하나의 앱 안에 하나의 스토어
• 상태는 읽기 적용 : 기존의 상태 건드리지 않고 새로운 상태 생성하여 업데이트
• 리듀서는 순수 함수 : 이전 상태 건드리지 않고 새로운 상태 객체 만들어서 반환하며, 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 함. (Date 등등 변하는 것들이 포함된다? 리듀서 밖에서 해라!)

https://react.vlpt.us/redux/01-keywords.html

리액트-리덕스 폴더 구조

액션 폴더

액션 메소드(api 통신, 명령어 등) 모아두는 폴더

컴포넌트 폴더

도메인별 구별 (헤더, 푸터...) / 컨테이너 컴포넌트(데이터, 공통 관리 객체, 컴포넌트 간 인터랙션 관리)와 프레젠테이션 컴포넌트(ui) 구분해서 개발하는 것이 좋다. 프레젠테이션 컴포넌트에 비즈니스 로직이 들어가지 않아야 재활용성 높아진다. 공통 컴포넌트는 index.js에 링크 추가하여 공유하면 유지 보수 쉽다.

reducer 폴더

액션 메소드에서 변경한 상태를 받아 상태를 변경한다

store 폴더

미들웨어 설정

미들웨어란?
액션이 디스패치된 다음, 리듀서에서 해당 액션을 받아와서 상태를 업데이트 하기 전에 추가적인 작업을 할 수 있다. 주로 비동기 작업을 처리할 때 사용된다. (백엔드 api 연동 등)
미들웨어로 하는 추가적인 작업이란...

• 특정 조건에 따라 액션이 무시되게 만든다
• 액션을 로깅한다 (redux-logger)
• 액션을 수정해서 리듀서로 전달한다
• 특정 액션이 발생하면 기반한 다른 액션이 발생하도록 한다
• 특정 액션이 발생하면 특정 자바스크립트 함수를 실행시킨다.

• redux-thunk
  리덕스에서 비동기 작업 처리시 사용. 액션 객체가 아닌 함수를 디스패치 할 수 있다.

state와 prop

state는 독립적인 컴포넌트의 상태이므로, 컴포넌트 자체의 색상, 애니메이션 등 상태는 state로 처리하는 것이 좋다.
서버와 동기화하는 데이터 등 전체적으로 관리해야 하는 상태는 부모 컴포넌트에서 prop으로 받아 처리한다. prop은 app 컴포넌트가 갱신되기 때문에 state보다 비교적 느리다.

global state vs local state

• Do other parts of the application care about this data?
• Do you need to be able to create further derived data based on this original data?
• Is the same data being used to drive multiple components?
• Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
• Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?
• Do you want to keep this data consistent while hot-reloading UI components (which may lose their internal state when swapped)?

This is also a good example of how to think about forms in Redux in general. Most form state probably shouldn't be kept in Redux.

connect()

컨테이너 컴포넌트에서 프레젠테이션 컴포넌트로 state와 dispatch() 메소드를 전달할 때 사용하는 메소드.

.....인데 요새는 Hook api를 주로 사용한다고.
Redux 공식 튜토리얼을 해보자!

Redux Essentials Tutorial

공식 tutorial에서 reduxjs/toolkit까지 사용한 버전으로 진행하기 때문에 일단 그대로 따르기로 한다.

기본 flow

1. add slices of state (createSlice)
2. write reducer function (createSlice 내부 reducers 필드 및 configureStore reducer 필드에 작성)
3. dispatch action (리액트 컴포넌트가 useDispatch hook를 통해 dispatch 실행하고 store를 업데이트한다.)
4. render the UI based on data from the store (리액트 컴포넌트는 useSelector hook를 통해서 state에서 특정 data를 읽어낸다. selector function은 store가 업데이트 될 때마다 다시 호출되어 data가 변경되었을 경우 리렌더링.)

Async Thunks Pattern

1. "start" action is dispatched before the request. (이중 request 방지 및 loading UI)
2. async request is made
3. (if success) dispatches action containing the result data. (else) dispatches action containing error details.
4. reducer clears the loading state and processes the result data.(or stores the error value)

출처
https://d2.naver.com/helloworld/1848131
https://www.howdy-mj.me/redux/react-redux-intro/
https://velog.io/@hidaehyunlee/React-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-4-%EC%98%88%EB%B0%9C%EC%9E%90-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-Redux-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0