Redux - 기본 개념

Redux?

Flux architecture로부터 파생된 단방향성 전역적 상태 관리 도구

많은 경우 React와 함께 사용하나 React 없이도 사용 가능

 

Redux를 사용하는 이유

1. 전역적 상태 관리

2. 상태의 중앙화 및 높은 예측 가능성

3. 디버깅 툴의 편리성

useContext & useReducer 대신 사용하는 이유?
- 생산성의 차이
- 결국 useContext, useReducer를 사용해서 Redux를 구현하게 된다.

 

Redux의 원칙

1. Single source of truth: 유일한 store에서 전역적 state를 관리

2. State is read-only: state 직접 수정 금지. action과 dispatch를 통한 변경만 가능. (Immutability)

3. Changes are made with pure functions: state를 변경시키는 reducer는 순수 함수여야 한다.

 

Redux의 기본 용어

- store: state의 데이터 묶음

- action: state를 변경하기 위한 JS 객체. 어떤 작업을 할 지 설명해주는 역할. 보통 action creator 형태로 사용.

- reducer: state와 action을 바탕으로 변경사항이 반영된 새로운 store 객체를 생성하는 순수 함수.

  - 객체를 생성하는 이유? 불변성을 통한 히스토리 기능, 추적 가능하게 하기 위함

- dispatch: action에 의한 변경사항을 reducer를 통해 store에 반영시키는 함수.

- selector: store에서 특정 state 값을 가져오기 위한 함수.

- middleware: dispatch와 reducer 사이에서 어떠한 동작 처리를 위해 사용.

    - 비동기 처리에 많이 사용. ex) redux-thunk, redux-saga

 

Data flow

1. initial state, reducer, middleware로 store 생성

2. User event로부터 dispatch 함수 호출, action을 parameter로 전달

3. middleware가 있는 경우, middleware 처리 후 reducer 호출

4. reducer에서 전달받은 action과 이전 store를 바탕으로 새로운 store 객체 생성

5. 새로운 store의 state로 view update