Redux 맛보기

2018-03-20

1. Redux

컴포넌트끼리 데이터 교류 및 state 관리를 쉽고 효율적으로 할 수 있도록 도와주는 라이브러리
Flux 아키텍처를 구현한 라이브러리
컴포넌트는 스토어에 데이터를 담고 dispatch에서 store에 데이터를 update 할 시, 컴포넌트에서는 해당 데이터의 변경을 주시하고 있다가 변동이 있을 시 바로 subcribe 시킴
Redux는 Flux와 달리 dispatcher가 없고, 어떤 작업을 해야할지 정하는 것은 store가 넘겨 받음. 그리고 그 작업을 실질적으로 수행하는 것은 reducer이다. store는 reducer에게 어떤 변화를 일으켜야 하는지 묻는다.
상태 객체는 직접 변경되지 않으며 대신 각각의 상태 조각이 복사 후 변경되고 새로운 상태 객체 하나로 합쳐진다. reducer는 복사되고 업데이트 된 상태 객체를 root reducer에게 넘겨주고, root reduce는 이 객체를 store로 보낸다. 그리고 store로는 이 객체를 새로운 애플리케이션 상태로 만든다.

Single Source of Truth: 어플리케이션의 state를 위해 단 한개의 store를 사용. (Flux에서는 여러개의 store를 사용한다.)
State is Read-only: 어플리케이션에서 store의 state를 직접 변경할 수 없다. state를 변경하기 위해서는 무조건 action이 dispatch 되어야 한다.
Changes are made with pure Function: action 객체를 처리하는 함수를 reducer라고 부른다. reducer는 정보를 받아서 상태를 어떻게 업데이트 할지 정의한다. reducer는 ‘순수 함수’로 작성되어야 한다. 즉 네트워크 및 데이터베이스 접근 X, 인수 변경 X, 비동기적인 처리 X, 순수하지 않은 API는 사용 불가(Date.now(), Math.random() 등)

 {type: "INCREMENT"}
 {type: "DECREMENT"}
 {
  type: "SET_COLOR",
  color: [200,200,200]
 }

reducer는 한개만 있을 수도 있고 여러개가 있을 수도 있는데 만약 reducer가 한 개일 경우 그 reducer가 root reducer이고, reducer가 여러개라면 여러개의 reducer를 관리하는 root reducer 있다.
reducer가 action을 받을 때 reducer가 하나만 있는 root reducer라면 자신이 그 action을 처리하고, reducer 여러 개 라면 해당 action을 처리하는 reducer를 찾아내서 그 reducer에게 전달해준다.
변화를 일으키는 함수
이 함수는 순수하여야 함. 비동기 작업 X, 전달받은 인수 변경 X, 동일한 인수 = 동일한 결과 (randomize()와 같은거 쓰면 안됨)
이전 상태와 액션을 받아서 다음 상태를 반환한다. (previousState, action) => newState
이전 상태를 변경하는 것이 아니라 그저 새로운 상태를 반환 하는 것
인수로 전달받은 기존 상태를 복사한 다음에 action에 따라 변화를 준 다음에 반환

어플리케이션의 현재 상태를 지니고 있음. 단 하나의 store가 있어야 하며, createStore(reducer)를 이용하여 스토어를 생성할 수 있다
Flux의 dispatcher의 역할을 위임받았다.
dispatch(action): 현재 자신의 상태와 전달받은 action을 reducer로 보냄.
getState(): 현재 상태를 반환
subscribe(listener): 상태가 바뀔 때 마다 실행할 함수를 등록. listener는 상태가 바뀔 때마다 실행될 callback 함수
replaceReducer(nextReducer): 리로딩과 코드 분할을 구현할 때 사용. (보통은 사용될 일이 없음)

Alt text