Vuex State Management Pattern 탄생 배경 정리

Elm Architecture 등장배경

• Model - 어플리케이션의 상태를 담당한다. (the state of your application)

• Update - 상태를 수정하는 부분이다. (a way to update your state)

• View - HTML로 상태를 표현하는 부분이다. (a way to view your state as HTML)

1. DOM과 관련한 이벤트가 발생하면 이 이벤트를 Msg 형태로 바꾸어서 다시 Elm 프로그램으로 전달한다.(Update)

Flux 등장 배경

MVC 패턴

• Model - 어플리케이션의 데이터를 담당하며, 내부 비지니스 로직을 처리한다.

• View - 사용자에게 보여지는 화면을 담당하며, Controller에 연결되어 화면을 구성하는 단위요소이다.

• Controller - 사용자로부터 입력(Input)을 받아서 Model 과 View를 중개하는 역할을 한다.

1. 모든 입력(Input)들은 Controller로 전달된다.

2. Controller는 입력에 해당하는 Model을 업데이트한다.

3. Model 업데이트 결과에 따라 해당 업데이트와 관련된 View를 Controller가 선택해 업데이트 요청을 보낸다. (이때 Controller는 여러 개의 View를 선택하고 관리할 수 있다.)

4. Controller는 View를 선택만 할 뿐 직접 업데이트하지는 않는다. 따라서 View가 Model의 데이터 변화에 따라 직접 업데이트한다.

We originally set out to deal correctly with derived data: for example, we wanted to show an unread count for message threads while another view showed a list of threads, with the unread ones highlighted. This was difficult to handle with MVC — marking a single thread as read would update the thread model, and then also need to update the unread count model. These dependencies and cascading updates often occur in a large MVC application, leading to a tangled weave of data flow and unpredictable results.

Flux Architecture

• Dispatcher - Flux 애플리케이션의 모든 데이터 흐름을 관리하는 허브 역할을 한다.

• Store - 애플리케이션의 상태를 저장한다. MVC 패턴의 Model과 유사하지만 ORM(Ojbect-relational Mapping) 스타일로 데이터를 다루지 않는다. 그보다는 애플리케이션의 특정 도메인에 해당하는 상태를 다룬다고 보는 편이 좋다. MVC의 모델은 어떤 객체를 모델링하는데 주력하고 있다면, Flux의 스토어는 상태를 다룬다는 개념으로 접근해야 하므로 무엇이든 저장할 수 있다. 그리고 대체로 단순한 자바스크립트 Object로 구성된다.

• View - 여기서 말하는 View는 MVC의 View와는 달리 스토어에서 데이터를 가져오는 한편 데이터를 자식 View로 전달하기도 하는 일종의 View-Controller로 보아야 한다. React를 기반으로 작성된 컴포넌트를 떠올리면 될 것이다.

동기의 경우

1. Dispatcher로 전달할 액션 객체는 대체로 액션 생성자(Action creator, 아래 예제에서는 TodoActions.create와 TodoActions.destroy )라는 함수 또는 메소드를 통해 만들어진다. Dispatcher의 특정 메소드 dispatch를 호출할 때 Action이라는 데이터 묶음을 인수로 전달한다.

const TodoActions = {
  create(text) {
    AppDispatcher.dispatch({
      actionType: Constants.TODO_CREATE,
      text
    });
  },
  ...
  destroy(id) {
    AppDispatcher.dispatch({
      actionType: Constants.TODO_DESTROY,
      id
    });
  },
  ...
};

1. Action을 호출한다.

// 리액트 컴포넌트에서 새 Todo 항목을 작성할 때
TodoActions.create(text);

1. Store가 Dispatcher로부터 메시지를 수신한다.

const TodoStore = Object.assign({}, EventEmitter.prototype, {
  ...
});

// TODO 항목 작성
function create(text) { ... }

// TODO 항목 삭제
function destroy(id) { ... }

// 스토어를 업데이트하는 콜백 함수 등록
AppDispatcher.register(function(action){
  switch(action.actionType) {
    case Constants.TODO_CREATE:
      create(action.text);
      TodoStore.emitChange();
      break;
    case Constants.TODO_DESTROY:
      destroy(action.id);
      TodoStore.emitChange();
      break;
    ...
  }
});

1. 뷰는 관련 스토어의 변경 사항을 감지할 수 있는 이벤트 리스너를 스토어에 등록하고, 스토어에 변경 사항이 발생하면 이를 뷰에 반영한다. 이 때 뷰에서는 자신의 setState()나 forceUpdate() 메소드를 실행하고, 이로 인해 자동적으로 render() 메소드도 호출된다. 다음은 페이스북의 Todo 예제에서 가져온 React 컴포넌트의 일부 코드이다. 이를 통해 React로 작성된 뷰와 스토어가 어떻게 동작하는지 짐작해 볼 수 있다.

function getTodoState() {
  return {
    allTodos: TodoStore.getAll(),
    areAllComplete: TodoStore.areAllComplete()
  };
}

const TodoApp = React.createClass({
  getInitialState() {
    return getTodoState();
  },

  componentDidMount() {
    TodoStore.addChangeListener(this._onChange);
  },

  componentWillUnmount() {
    TodoStore.removeChangeListener(this._onChange);
  },

  render(){
    ...
  },

  _onChange() {
    this.setState(getTodoState());
  }
});

비동기의 경우

const TodoActions = {
  create(text) {
    var id = getUniqueId();
    AppDispatcher.dispatch({
      actionType: Constants.TODO_CREATE,
      id
      text
    });

    ajaxPost(saveURL)
      .then(data => {
        AppDispatcher.dispatch({
          actionType: Constants.TODO_CREATE_SUCCESS,
          id
        });
      })
      .catch(reason => {
        AppDispatcher.dispatch({
          actionType: Constants.TODO_CREATE_FAIL,
          reason
        });
      });
  },
  ...
};

Redux 등장 배경

•  State - 웹앱 전체의 상태를 관리하는 부분이다.

•  View - 현재 상태(state)에 기초한 UI를 선언하는 화면단이다.

• Actions - 사용자 입력에 따라 이벤트가 발생할 때 State를 업데이트 시키기위한 동작을 미리 정의해놓은 것이다.

• state : 컴포넌트 간에 공유할 data

• view : 데이터가 표현될 template

• actions : 사용자의 입력에 따라 반응할 methods

1. Store에 선언된 State에 따라 View가 rendering된다.(UI가 화면에 그려진다.)

2. 사용자가 버튼을 클릭하는 등 이벤트가 발생하면 해당 Action이 실행되며 State가 업데이트된다.

3. 새로 업데이트된 State에 따라 View가 새로 그려진다.

1. 사용자가 View에 있는 로그인 Form에 필요한 정보(아이디, 비밀번호 등)를 채우고 로그인 버튼을 누른다. Form에는 미리 로그인 Action을 연결해두었는데(handleSubmit 함수 부분), Action은 로그인이라는 동작(아래에서는 login)을 정의해둔 것이다.

import React, { useCallback } from 'react';
import useInput from '@hooks/useInput';
import { useDispatch, useSelector } from 'react-redux'

const LoginPage = () => {
const dispatch = useDispatch();
const [id, handleId] = useInput('');
const [password, handlePassword] = useInput('');
const accessToken = useAppSelector((state) => state.user.accessToken);

const handleSubmit = useCallback(
    () => {
	   dispatch(login(id, password));
    },
    [userID, password],
  );

render() {
    return (
      accessToken
        ? <div>로그인 성공</div>
        :
        <form onSubmit={handleSubmit}>
          <label>
            <span>아이디</span>
            <input value={id} onChange={handleId}/>
          </label>
          <label>
            <span>비밀번호</span>
            <input type="password" value={password} onChange={handlePassword} />
          </label>
        </form>
    );
  }
};

export default LoginPage;

1. Dispatcher을 통해서 Action에서 Store로 데이터가 넘어간다.

 dispatch(login(id, password));

1. Dispatcher가 아래와 같이 미리 정의해 둔 로그인 Action을 실행한다.

export const LOGIN = 'LOGIN';
export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';

export const login = (id, password) => {
  return {
    type: LOGIN,
    promise: { method: 'post', url: '/login', data: { id, password } }
  };
};

1. Action에서 Store로 데이터가 넘어간다. Store에는 Middleware과 Reducer이 있다. 아래의 configureStore 파일은 Reducer을 Store과 연결할 때 필요하다.

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducer/user.js';
import promiseMiddleware from '../middleware/promiseMiddleware.js';

export default function(initialState) {
  const enhancer = compose(applyMiddleware(promiseMiddleware));
  return createStore(reducer, initialState, enhancer);
}

1. Middleware는 Reducer에 가기 전 Action을 조작하다는 곳이다. 위의 Action에 만들어 둔 promise 옵션을 처리할 미들웨어는 다음과 같다.

import axios from 'axios';

export default () => {
  return next => action => {
    const { promise, type, ...rest } = action;
    next({ ...rest, type: `${type}_REQUEST` });
    return axios({
      method: promise.method,
      url: promise.url,
      data: promise.data
    })
      .then(result => {
        next({ ...rest, result, type: `${type}_SUCCESS` });
      })
      .catch(error => {
        next({ ...rest, error, type: `${type}_FAILURE` });
      });
  };
};

1. Reducer은 데이터를 처리하는 부분이다. 이곳에서 Action별로 어떻게 state를 바꿀 지 결정한다. 한 가지 주의할 점은 반드시 새로운 객체를 반환 해야한다는 점이다.

import { combineReducers } from 'redux';
import { login, LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE } from '../action/user.js';

const defaultState = {
  isLoggedIn: false,
  fetchingUpdate: false,
  user: {}
};

const userReducer = (state = defaultState, action) => {
  switch (action.type) {
    case LOGIN_REQUEST:
      return {
        ...state,
        fetchingUpdate: true
      };
    case LOGIN_SUCCESS:
      return {
        ...state,
        fetchingUpdate: false,
        isLoggedIn: true,
        user: action.result,
      };
    case LOGIN_FAILURE:
      return {
        ...state,
        fetchingUpdate: false
      };
  }
};

export default combineReducers({
  user: userReducer
});

const accessToken = useAppSelector((state) => state.user.accessToken);
render() {
    return (
      accessToken
        ? <div>로그인 성공</div>
        :
        <form onSubmit={handleSubmit}>
          중간 생략...
        </form>
    );
  }
};

Vuex State Management Pattern

1. Application-level state is centralized in the store.

2. The only way to mutate the state is by committing mutations, which are synchronous transactions.

3. Asynchronous logic should be encapsulated in, and can be composed with actions.

1. 사용자가 Dashboard 페이지에 접속한 후 해당 component가 mounted 될 때 dispatch 함수를 통해 미리 등록한 weather/loadCurrentWeatherData이라는 Action을 호출한다.

<script>
export default {
  name: 'DashBoard',
 중간 생략...
  mounted() {
    this.$store.dispatch('weather/loadCurrentWeatherData', { cityName: 'Seoul' })
  },
}
</script>

1. 아래 코드는 store/index.js 파일은 Vuex Store에 미리 weather module를 정의해놓은 것이다.

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import weather from './modules/weather'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    user,
    weather,
  },
  strict: debug,
  plugins: debug ? [Vuex.createLogger()] : [],
})

1. weather module에는 다음과 같이 state, getters, actions, mutations이 미리 등록되어 있다.

import { getCurrentWeatherData } from '@/api'

const state = () => ({
  currentWeatherData: [],
  oneCallApiData: [],
})

const getters = {
  doneCurrentWeatherMain(state) {
    return state.currentWeatherData?.weather[0].main
  },
}

const actions = {
  async loadCurrentWeatherData({ commit }, payload) {
    commit('setCurrentWeatherData', await getCurrentWeatherData(payload.cityName))
  },
}

const mutations = {
  setCurrentWeatherData(state, payload) {
    state.currentWeatherData = payload
  },
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
}

1. Dashboard 페이지에서 호출된 loadCurrentWeatherData Action에서는 getCurrentWeatherData(payload.cityName) 라는 비동기 요청을 다루고 있다. OpenWeatherMap API를 통해 axios로 보낸 오늘 날씨에 대한 get 요청의 응답이 오길 기다린 후, commit 함수로 Mutations 에 등록된 setCurrentWeatherData 함수를 호출하고 있다.

 async loadCurrentWeatherData({ commit }, payload) {
    commit('setCurrentWeatherData', await getCurrentWeatherData(payload.cityName))
  },

import axios from 'axios'

axios.defaults.baseURL = 'https://api.openweathermap.org/data/2.5'
const API_KEY = process.env.VUE_APP_OPEN_WEATHER_API_KEY

const getCurrentWeatherData = async (cityName) => {
  // https://openweathermap.org/current
  try {
    const response = await axios.get('/weather', {
      params: {
        q: cityName,
        appid: API_KEY,
      },
    })
    return response.data
  } catch (error) {
    console.error(error)
    return false
  }
}


export { getCurrentWeatherData, getOneCallApiData }

1. Mutations의 setCurrentWeatherData 함수에서 State에 정의된 currentWeatherData 의 값을 변경하고 있다.

const mutations = {
  setCurrentWeatherData(state, payload) {
    state.currentWeatherData = payload
  },
}

1. Getters에 등록된 doneCurrentWeatherMain함수에서 View로 보여질 데이터를 가공한다.

const getters = {
  doneCurrentWeatherMain(state) {
    return state.currentWeatherData?.weather[0].main
  },
}

1. DashBoard component에서 Getters에 등록된 doneCurrentWeatherMain를 가져와 보여주고 있다. 업데이트된 데이터가 사용자에게 보여진다.

<template>
  <div>
    <v-alert
      v-show="!doneCurrentWeatherMain"
      type="error"
    >
      오늘 날씨 정보를 가져오는 도중 문제가 발생했습니다.
    </v-alert>
    <div>
      <h1>Dashboard</h1>
      <span>{{ doneCurrentWeatherMain }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'DashBoard',
  computed: {
    ...mapGetters('weather/', [
      'doneCurrentWeatherMain',
    ]),

  },
  mounted() {
    this.$store.dispatch('weather/loadCurrentWeatherData', { cityName: 'Seoul' })
  },
}
</script>