Redux란?
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다
- 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리
- Flux 패턴에 영감을 받아서 Dan Abramov가 개발
- Flux는 디자인 패턴으로, 일종의 실체가 없는 개념이지만 Redux는 이 패턴을 적용해 자바스크립트로 구현한 구현체이다
- React 또는 다른 View 라이브러리와 함께 사용가능
Redux 원칙 3가지
- 진실은 하나의 소스로부터 (Single source of truth)
- 상태는 읽기 전용이다 (State is read only)
- 변화는 순수 함수로 작성되어야 한다 (Changes are made with pure functions)
1. 진실은 하나의 소스로부터
- 애플리케이션의 모든 상태(State)는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됨
- 여러 개의 저장소를 관리하는 것이 아니라, 단 하나의 자바스크립트 객체로만 데이터를 저장
2. 상태는 읽기 전용이다
- 상태(state)는 읽기 전용, 즉 Store에 직접 접근해서 state를 수정할 수 없다는 뜻이다
- 상태(state)를 수정할 수 있는 유일한 방법은 Action 객체를 Dispatch를 통해서 Store에 전달하는 것 뿐
- 상태(state)를 업데이트하는 방식과, 시점을 제한해서 예측 가능성을 증대시킨다
3. 변화는 순수 함수로 작성되어야 한다
- 전달된 Action을 통해서 State를 변경해야하는데 이때 모든 변화는 순수 함수로 작성되어야 한다
(순수함수 : 사이드 이펙트가 없는 함수로, 같은 Input에 대해 같은 Output을 보장할 수 있다)
- 순수 함수를 이용하면 상태의 변화를 예측 가능하게 할 수 있다
- Redux에서 state의 변화를 책임지는 순수 함수를 Reducer라고 부른다
(Reducer : 이전의 state와 action객체를 input으로 받아서 새로운 state를 return하는 함수)
Redux의 데이터 흐름
View에서 event 발생 >
Action객체 생성 >
Dispatch로 Action 전달 >
(Middleware) >
Reducer >
Store의 state 변경 >
UI 반영
Redux 주요개념
- View : 유저가 사용하는 화면, 버튼 등 UI 요소
- Action & Action Creator
- Dispatcher : dispatch는 발송하다의 의미로, Action객체를 Store의 Reducer에 전달하는 역할을 담당한다
- Redux에서는
store.dispatch(액션객체)
의 형태로 제공
- 동기적으로 처리되도록 작성되었기에 비동기 Action을 처리할 수 없다
(비동기적인 처리가 필요할 경우 Middleware을 활용해야함 : Action을 다시 Dispatch)
- Reducer : 이전 state 와 Action객체를 받아서 새로운 state를 리턴하는 순수 함수
- Store가 하나이기에 Reducer도 하나로 만들어져야한다 그래서 모든 관심사가 한 함수에 합쳐지면 유지보수에 어려움이 생김
Redux에서는 각각의 로직을 관심사별로 분리해서 SliceReducer를 만든 후 combineReducer 함수를 통해서 rootReducer를 만드는 방식을 사용한다
- Store : Redux의 전체 state를 관리하는 하나의 객체
- store객체를 직접 선언해 만들 필요는 없으며 rootReducer로 부터 createStore 함수를 이용해서 생성
- Middleware : Action이 Dispatch를 통해서 Reducer에 전달되기 전 중간 처리를 담당하는 부분으로 필수적인 요소는 아니다. (필요시 활용)
- 비동기 API호출, 로깅 등의 사이트 이펙트를 위해 많이 사용
- 자주사용되는 Redux의 미들웨어 라이브러리는 redux-thunk, redux-saga등이 있다