getting started with redux

Flux 란?

flux 는 하나의 개발 철학이며 기존의 MVC 모델이나 양방향 데이터 바인딩에 대한 대안으로 제안된 개념이다.

flux에는 다음과 같은 3가지 개념이 있다.

1. action
2. dispatcher
3. stores

action은 시스템 전체의 상태변화를 묘사하는 다양한 형태의 행위이다. 가령 마우스 클릭이나 axios 요청 등의 행위들이 여기에 포함될 수 있다.

이러한 일련의 action들의 모음으로 시스템이 흘러가며 이를 통해 일관된 행동 양상을 유지하고 시스템의 다음 행보를 예측이 가능하게 된다.

일반적인 flux의 플로우는 다음과 같다.

1. store는 action의 변화를 인지하도록 준비한다.
2. action이 dispatcher를 통해 dispatch 된다.
3. dispatcher는 store의 subscriber에게 변화를 알린다.
4. store는 해당하는 action에 따라 상태를 업데이트한다.
5. 어플리케이션의 view는 해당 상태의 변화에 따라 업데이트 된다.
6. 다음 액션이 실행될 수 있다.

이렇게 시스템 전체가 일련의 action의 나열로 이루어짐에 따라 개발자들은 다음 시스템의 상태를 예상가능하게 되고 개발자의 통제 내에서 모든 시스템 변화가 이루어 질 수 있게 된다. 여기서 중요한 점은 모든 action이 순차적으로 이루어진다는 것이다.

이는 기존의 양방향 데이터바인딩 시스템과 매우 대조적인데 양방향 시스템에서는 모든 데이터가 실시간으로 변화하고 있기에 일관된 데이터의 변화 방향을 인지할 수 없지만 시스템의 순간순간의 상태는 각 액션 사이의 상태값의 변화이기에 모든 순간의 상태값에 대해 인지할 수 있다.

Redux

리덕스란 이러한 flux 패턴의 하나의 구현체이며 단 하나의 스토어를 가진다는 점에서 플럭스와 차이가 있다.

가령 요리책을 다루는 app의 경우 redux 스토어는 모든 요리방법들의 리스트와 상세 내역을 가지게 된다.

여기서 액션이란 요리방법을 추가하고 특정 레시피에 재료를 추가하는 행위라 할 수 있겠다.

실제 비즈니스 로직에서는 이런 다양한 액션들을 묶어서 사용자가 사용하는 수준으로 만들어줄 필요가 생기고 그것이

action

액션은 애플리케이션에서 스토어로 보내는 데이터 묶음이며, 스토어의 유일한 정보원이다.

store.dispatch()

액션의 종류

{

type: COMPLETE_TODO,

index: 5

}

리듀서

이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다.

(prevState, action)

스토어

액션과 리듀서를 함께 가져오는 객체이다.

createStore(_action) => store

store.dispatch(_action)

프로세스

1. Create actionDescribe what happens
2. store.dispatch(action)
3. Redux store executes reducer function
4. Root reducer makes one state tree by merging reducer outputs
5. Store.subscribe(listener) => call all listener