Redux 소개
- Props Drilling 문제를 해결하기 위해 등장
- Context API에 useReducer를 사용한 것과 유사하다.
- 변경된 부분만 리렌더링이 일어난다. 중앙 집중으로 만들어도 최적화가 이루어진다.
3가지 원칙
- 진실은 하나의 근원으로부터
- 상태는 읽기 전용이다
- 변화는 순수 함수로 작성되어야 한다
(리듀서 안에는 네트워크 로직이 들어가서는 안 된다)
Flux 패턴
단방향. 에러를 추적하기 쉽다.
액션을 미리 만들어놓아야 하는 단점이 있다.
액션 크리에이터는 필수적인 기능은 아니다.
initialState의 구조를 잘 설계하는 것이 중요하다.
해당 구조를 기반으로 action과 reducer가 결정되기 때문이다.
리듀서를 도메인마다 분리하려면
combineReducers를 사용한다.미들웨어 기능
dispatcher와 reducer 사이에 미들웨어가 있다.
미들웨어는 기본적으로 3단 함수로 구성된다.
const thunkMiddleware = store => dispatch => action => { if (typeof action === 'function') { return action(store.dispatch, store.getState); } return dispatch(action); }
redux-logger
상태가 변경될 때 console에 로그를 찍어주는 라이브러리.
@types/redux-logger도 설치.
redux-devtools-extension
개발자 도구에서 상태를 추적할 수 있다.
redux-persist
상태가 웹 스토리지에 남아 있을 수 있도록 도와주는 라이브러리.
@types/redux-persist도 설치.
storage: 로컬 스토리지 / session: 세션 스토리지
무조건 Redux가 더 좋은 것은 아니다. 상황에 맞는 도구를 선택하자.
처음에는 Context API에서 시작하고, 프로젝트의 규모가 커지면 Redux로 옮길 수 있다.