FLUX 패턴

redux에 대해 좀 더 공부해보고자 FLUX 패턴을 정리해본다.

MVC 패턴

FLUX 패턴에 대해 정리하기 전에 알아둬야 할 것이 MVC 패턴이다.

MVC 패턴에서는 Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달한다. 실제 서비스를 사용하는 사용자들의 상호작용들은 VIEW에서 일어나기 때문에 VIEW가 MODEL을 업데이트하기도 한다. 또 모델의 의존성 문제로 한 모델이 다른 모델을 업데이트 해야 하는 경우도 있다.

MVC 패턴의 가장 큰 문제점은 데이터의 변경 사항을 빠르게 전파하기 어렵고, 의존성 때문에 각 모델에서 발생한 이벤트가 어플리케이션 전체로 퍼져나갈 때 산사태처처럼 아주 많은 변화를 만들어 유지보수가 엄청나게 어려워진다는 점이다.

클라이언트 사이드로 넘어오면서 이렇게 양방향 통신으로 변화했다.

FLUX 패턴

FLUX 패턴은 MVC 패턴을 해결하기 위해 facebook에서 만든 패턴이다. MVC 패턴은 MODEL과 VIEW가 서로를 반영하는 양방향 흐름인 것에 반해 FLUX 패턴은 단반향 흐름으로만 데이터를 반영할 수 있다.

Action / Action Creator

액션 생성자는 타입(type)과 페이로드(payload)를 포함한 액션을 생성한다. type은 액션 상수에 해당하고 payload는 액션을 통해 전송하고자 하는 데이터이다.

getSelectedBook : (selectedBook)=>{
  return{
    //initBookActions : 상수를 저장한 js파일
    //SELECT : action 상수
    type: initBookActions.SELECT,
    //payload
    selectedBook,
  }
},

dispatcher

디스패쳐는 콜백 함수로 액션 메세지를 스토어에 전달하는 역할을 한다. 스토어가 서로를 의존하는 경우 특정 스토어가 업데이트가 될 때까지 기다리게 해주는 waitFor()를 사용할 수 있다.

Store

모든 상태변경이 이루어지는 곳이다. 모든 상태변경은 반드시 스토어에 의해 이루어져야 하지만 상태 변경을 위한 요청을 스토어에 직접적으로 요청할 순 없다. 무조건 생성자와 디스패처 파이프라인을 거쳐 액션을 보내야 한다.

스토어는 보통 switch문을 사용해서 처리할 액션을 받고 주어진 액션에 따라 무엇을 할지 결정하고 상태를 변경한다.

View

뷰는 상태를 유저에게 보여주고 입력받을 화면을 렌더링하는 역할을 맡는다. 컨트롤러 뷰는 스토어에서 변경된 데이터를 가져와 모든 자식 뷰에게 분배한다. 데이터를 받은 자식 뷰는 화면을 새롭게 렌더링한다.

Redux

리덕스는 FLUX 패턴을 따르고 있지만 FLUX 패턴을 그대로 구현하지는 않았다. 리덕스에는 디스패처 개념이 없다. 리듀서가 디스패처와 스토어의 기능을 모두 담당하고 있다.

리듀서

리덕스에서는 디스패쳐가 없는 대신 리듀서가 상태변화를 관리하고 있다. 리듀서는 전체 리듀서를 관리하는 루트 리듀서와 그 하위에 있는 서브 리듀서로 나뉜다.

//루트 리듀서
import { combineReducers } from "redux";
import {bookStore} from "./bookStore";
import { toggleStore } from "./toggleStore";

const reducers = combineReducers({
    bookStore,
    toggleStore
});

export default reducers

//서브 리듀서
import { initToggle } from "../actions/initActions"

const initToggleState = {
    modifyToggle : false,
    modalToggle : false,
}

export const toggleStore = (state=initToggleState, action) =>{
    switch(action.type){
        case initToggle.MODIFY_TOGGLE:
            {
                return {...state, modifyToggle:action.bool}
            }
        case initToggle.MODAL_TOGGLE:
            {
                return {...state, modalToggle:action.bool}
            }
        default:
            return state
    }
}