Redux - Redux

 

 

Redux

 

 

 

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너

단방향 데이터 흐름을 이용해 예측 가능하고 일관적인 상테 컨테이너 역할을 제공하는 라이브러리

Flux 패턴에 영감을 받아서 Dan Abramov가 개발

Flux는 하나의 패턴, 이 Flux 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 redux

React 또는 다른 View 라이브러리들과 함께 사용할 수 있음

 

 

 

 

Redux 3가지 원칙

 

 

1. 진실은 하나의 소스로 부터

 

-> 애플리케이션의 모든 상태(state)는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됨

-> 여러 개의 저장소(Store)를 관리하는 것이 아니라 단, 하나의 자바스크립트 객체로만 데이터를 저장

 

 

 

2. 상태(State)는 읽기 전용이다

 

-> 상태는 읽기 전용, 즉 Store에 직접 접근해서 State를 수정할 수 없다

-> 상태를 수정할 수 있는 유일한 방법은 Action 객체를 Dispatch를 통해서 전달하는 것

-> 상태를 업데이트하는 방식과, 시점을 제한해서 예측 가능성을 증대

 

 

빨간 네모칸 안에 전달되는 객체가 Action 객체

Action 객체에서는 의도를 type 프로퍼티를 이용해서 표현함

그 외의 필요한 정보들은 다른 프로퍼티들을 이용해서 전달함

 

 

 

 

 

 

 

3. 변화는 순수함수로 적용되어야 한다

 

Redux State의 유일한 변경 방법 : Action 객체를 Dispatch를 통해서 Store에 전달하는 것

전달된 Action을 통해서 상태를 변경해야 함 ( 이때 모든 변화는 순수 함수로 작성되어야 함)
-> 순수함수를 이용해서 상태의 변화를 예측 가능하게 할 수 있음

-> Redux에서 state의 변화를 책임지는 순수 함수를 Reducer 라고 부름

( 이전의 상태와 액션 객체를 input으로 받아서 새로운 상태를 return 하는 함수)

 

순수함수란?

-> 사이드 이펙트가 없는 함수, 같은 input에 대해 같은 Output을 보장하는 것

 

 

 

 

Reducer 예시 👇

 

reducer 는 함수, 인자로 이전 state와 action을 받음

다만, reducer가 처음 호출되는 경우는 이전 state가 없을 수도 있기에 빨간 박스처럼 인자의 기본 값을 설정해 주어야 함 (Store에서 이 state의 초기값)

 

함수 본문에 Switch 라는 분기처리하는 문법이 나옴

action 객체에 type에 따라서 분기처리를 했고

- type이 ADD_TODO 일 경우에는 기존의 State 를 복사, 거기에 새로운 todolist 객체를 추가해서 (return 문의 안의 객체) 새로운 State를 만들어 return 하였음

-  type이 COMPLETE_TODO 일 경우 특정 todolist의 완료 여부를 true로 만들어서 return 해주고 있음

- 액션 타입이 ADD_TODO,  COMPLETE_TODO 둘 다 아닐 경우에는 인자로 전달받은 state를 그대로 다시 return 해주는 모습

 

Redux에서는 이러한 Reducer 함수를 이용해서 State를 변화 시킴

 

 

 

 

 

 

 

Redux의 개괄적인 데이터 흐름

 

 

 

 

UI, Eventhandler, Store(Store 내부의 Reducer들), State 가 있음

 

 

 

UI : 현재 잔액 표시, ATM기와 같은 UI 

 

 

현재 잔액은 0원 -> 유저가 10만원 입금 버튼 클릭 -> click Event 발생 -> 이를 Event Handler에게 전달 -> EventHandler 는 변화를 발생 시켜야 함 -> Action 개체 필요해 만들게 됨 -> {type : "deposit", payLoad: 10} 같이 Action 객체에는 type이라는 프로퍼티에 "deposit" 이라는 의도를 담았고 payLoad라는 프로퍼티에는 10 이라는 숫자를 담아줌 -> 이 액션 개체를 Dispatch를 이용해서 Store에 전달 -> Store에서는 Reducer 함수를 이용해서 새로운 state 를 만들 것 -> Store는 Action 객체를 전달 받았지만 현재 State가 없음 -> Store 는 현재 State를 Reducer에 인자로 전달 -> Reducer 에서는 현재 State와 action 객체를 통해서 새로운 State를 만들어 냄 ( 이 경우는 현재 State 가 0이고, action 객체에 10이 입금 되었으니 새로운 State로 10이 나올 것 ) -> Store는 이것을 새로운 State로 설정 -> State 가 변화된 사실을 view에 전달 -> view는 State가 변화된 것을 인지하고 기존의 잔액을 0->10으로 변경

 

 

 

 

 

Reduce의 주요 개념

 

View / Action & Action Creator / Dispatcher / Reducer / Store / Middleware

 

 

 

 

 

 

View

: 유저가 사용하는 화면, 버튼 등의 UI 요소

 

 

 

 

 Action & Action Creator

: action ( 상태 변화에 대한 의도를 표현하는 단순한 자바스크립트 객체 )

: action Creator ( action 객체를 만드는 함수 )

-> action 객체를 매번 필요한 곳에서 손수 작성해도 되지만 action Creator 함수를 이용하면 중복을 제거하고 Action을 만드는 과정에서 실수를 방지할 수 있는 이점이 있음

 

함수이면서 인자로 item을 받아서 action 객체를 만들어서 return 함

action은 필수 구성요소, action Creator 선택 요소지만

통상 action Creator를 사용하는 경우가 일반적

 

 

 

 

 

 

 

 Dispatcher

: 발송하다

 

Action 객체를 Store의 Reducer에 전달하는 역할을 담당

Redux에서는 "store.dispatch()" 의 형태로 제공

동기적으로 처리되도록 작성되었기에 비동기 Action을 처리할 수는 없음

-> 비동기적인 처리가 필요한 경우 Middleware 를 활용해야 함

 

Middleware

: store.dispatch(addCart(payload)) 

: store.dispatch 형태의 함수로 제공되며 인자로 action 객체를 넣어서 호출하면 이 Action 객체를 Reducer에 전달해줌

위 예시에서는 addCart라는 Action Creator 함수를 통해서 Action을 만들어서 dispatch 함수의 인자로 전달하고 있음

 

 

 

 

 

Reducer

: 이전 state와 action 객체를 받아서 새로운 state를 리턴하는 함수

: Store가 하나이기에 Reducer도 하나로 만들어져야함, 하지만 모든 관심사가 한 함수에 합쳐지면 유지 보수가 어려움

: 따라서 Reducer에서는 각각의 로직을 분리해서 SliceReducer를 만든 후 combineReducer 함수를 통해서 rootReducer를 만드는 방식을 사용

 

 

 

왼쪽 코드가 SliceReducer (Cart에 대한 변화를 책임지고 있음)

우측 코드는 combineReducers 라는 함수를 호출하면서 SliceReducer들을 객체 형태로 인자에 전달해서 rootReducer를 만들어 줌

 

 

 

 

 

 

Store

:  redux의 전체 State를 관리하는 하나의 객체

: Store를 직접 선언해서 만들 필요는 없으며  기존에 만들어둔 rootReducer로부터 createStore 함수를 이용해서 생성

 

 

 

CreateStore 란 함수에 인자로 rootReducer에 전달하면

Store를 만들 수 있음

 

 

 

 

 

 

 

Middleware

: action이 dispatch 를 통해서 reducer에 전달되기 전 중간 처리를 담당하는 부분

: 필수적인 부분은 아님, 필요시에만 활용

: 비동기 API 호출, 로깅 등의 사이드 이펙트를 위해서 사용

: 자주 사용되는 reduxd의 미들웨어 라이브러리는 redux-thunk, redux-saga 등이 있음

 

 

 

 

 

 

정리

 

redux는 자바스크립트 앱을 위한 예측가능한 상태 컨테이너

flux 패턴에 영감을 받아 만들어졌으며, 단방향 데이터 흐름을 따름

 

redux의 세가지 원칙 ( 진실은 하나의 소스로부터, 상태는 읽기 전용, 변화는 순수 함수로 작성 되어야 함)

redux의 구성요소 ( View / Action & Action Creator / Dispatcher / Reducer / Store / Middleware )

-> 이 중 선택적인 요소는 Action Creator, Middleware  ( 다만, Action Creator 는 거의 대부분 사용 )

 

데이터 흐름

-> View에서 event 발생 => action 객체 생성 => Dispatch로 Action 전달 => (middleware) => Reducer에 전달 => Store의 State 변경 => 변경된 State를 UI에 반영