[CS] flux 패턴

flux 패턴

flux패턴은 단방향으로 데이터 흐름을 관리하는 디자인패턴

ex)
페이스북은 “읽은 표시(mark seen)”에 대한 기능장애를 겪었습니다. 어떤 페이지에서 메시지를 읽었는데 다른 페이지에서는 메시지가 안 읽었다고 뜨는 것이죠. 이는 모델(M, model)과 뷰(view)의 관계가 복잡해지니 버그를 수정하기도 데이터흐름을 알아보기 어려운 문제였습니다.

즉, 뷰에서 일어난 것이 모델에 영향을 끼치기도 그 반대도 영향을 미치는 로직도 있는 상황이 발생하여 데이터를 일관성 있게 뷰에 공유하기가 어려웠음. 이를 위한 해결방법으로 데이터가 “한방향”으로만 흐르게 flux 패턴이 등장
flux패턴은 action, dispatcher, store, view 라는 계층으로 구성

 

flux 패턴의 구조

Action

사용자의 이벤트를 담당. 마우스 클릭이나, 글을 쓴다던가 등을 의미하며 해당 이벤트에 관한 객체를 만들어내 dispatcher에게 전달

 

Dispatcher

Dispatcher는 들어오는 Action 객체 정보를 기반 어떠한 “행위”를 할 것인가를 결정. 보통 action객체의 type를 기반으로 미리 만들어 놓은 로직을 수행하고 이를 Store에 전달

 

Store

스토어는 애플리케이션 상태를 관리하고 저장하는 계층. 도메인의 상태, 사용자의 인터페이스 등의 상태를 모두 저장

 

view

데이터를 기반으로 표출이 되는 사용자 인터페이스

 

flux 패턴의 장점

- 데이터 일관성의 증대
- 버그를 찾기가 쉬워짐
- 단위테스팅이 쉬워짐

 

flux 패턴이 적용된 redux

 

const initialState = { visibilityFilter: "SHOW_ALL", todos: [] };
function appReducer(state = initialState, action) {
    switch (action.type) {
        case "SET_VISIBILITY_FILTER": {
            return Object.assign({}, state, {
                visibilityFilter: action.filter,
            });
        }
        case "ADD_TODO": {
            return Object.assign({}, state, {
                todos: state.todos.concat({
                    id: action.id,
                    text: action.text,
                    completed: false,
                }),
            });
        }
        case "TOGGLE_TODO": {
            return Object.assign({}, state, {
                todos: state.todos.map((todo) => {
                    if (todo.id !== action.id) {
                        return todo;
                    }
                    return Object.assign({}, todo, {
                        completed: !todo.completed,
                    });
                }),
            });
        }
        case "EDIT_TODO": {
            return Object.assign({}, state, {
                todos: state.todos.map((todo) => {
                    if (todo.id !== action.id) {
                        return todo;
                    }
                    return Object.assign({}, todo, { text: action.text });
                }),
            });
        }
        default:
            return state;
    }
}

 switch를 통해 action의 type을 통해 판단 각각의 행위를 결정

 

* 참고

- CS 지식의 정석 | 디자인패턴 네트워크 운영체제 데이터베이스 자료구조 -인프런