Flux 란?
flux 는 하나의 개발 철학이며 기존의 MVC 모델이나 양방향 데이터 바인딩에 대한 대안으로 제안된 개념이다.
flux에는 다음과 같은 3가지 개념이 있다.
- action
- dispatcher
- stores
action은 시스템 전체의 상태변화를 묘사하는 다양한 형태의 행위이다. 가령 마우스 클릭이나 axios 요청 등의 행위들이 여기에 포함될 수 있다.
이러한 일련의 action들의 모음으로 시스템이 흘러가며 이를 통해 일관된 행동 양상을 유지하고 시스템의 다음 행보를 예측이 가능하게 된다.
일반적인 flux의 플로우는 다음과 같다.
- store는 action의 변화를 인지하도록 준비한다.
- action이 dispatcher를 통해 dispatch 된다.
- dispatcher는 store의 subscriber에게 변화를 알린다.
- store는 해당하는 action에 따라 상태를 업데이트한다.
- 어플리케이션의 view는 해당 상태의 변화에 따라 업데이트 된다.
- 다음 액션이 실행될 수 있다.
이렇게 시스템 전체가 일련의 action의 나열로 이루어짐에 따라 개발자들은 다음 시스템의 상태를 예상가능하게 되고 개발자의 통제 내에서 모든 시스템 변화가 이루어 질 수 있게 된다. 여기서 중요한 점은 모든 action이 순차적으로 이루어진다는 것이다.
이는 기존의 양방향 데이터바인딩 시스템과 매우 대조적인데 양방향 시스템에서는 모든 데이터가 실시간으로 변화하고 있기에 일관된 데이터의 변화 방향을 인지할 수 없지만 시스템의 순간순간의 상태는 각 액션 사이의 상태값의 변화이기에 모든 순간의 상태값에 대해 인지할 수 있다.
Redux
리덕스란 이러한 flux 패턴의 하나의 구현체이며 단 하나의 스토어를 가진다는 점에서 플럭스와 차이가 있다.
가령 요리책을 다루는 app의 경우 redux 스토어는 모든 요리방법들의 리스트와 상세 내역을 가지게 된다.
여기서 액션이란 요리방법을 추가하고 특정 레시피에 재료를 추가하는 행위라 할 수 있겠다.
실제 비즈니스 로직에서는 이런 다양한 액션들을 묶어서 사용자가 사용하는 수준으로 만들어줄 필요가 생기고 그것이
action
액션은 애플리케이션에서 스토어로 보내는 데이터 묶음이며, 스토어의 유일한 정보원이다.
store.dispatch()
액션의 종류
{
type: COMPLETE_TODO,
index: 5
}
리듀서
이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다.
(prevState, action)
스토어
액션과 리듀서를 함께 가져오는 객체이다.
createStore(_action) => store
store.dispatch(_action)
프로세스
- Create actionDescribe what happens
- store.dispatch(action)
- Redux store executes reducer function
- Root reducer makes one state tree by merging reducer outputs
- Store.subscribe(listener) => call all listener