Vanilla 로 구현해보는 상태관리(리덕스)

해당 내용의 코드는 github 에 있습니다.

리덕스 상태 관리 만들기

리덕스 키워드 간단 설명

자세한 내용은 해당 블로그 를 참고하세요

{
	type: 'INCREMENT'
}

// 인자 추가
{
  type: "SET_DIFF",
	data: diff
}

• 상태에 어떠한 변화가 필요할 때, 액션을 사용한다.

• 액션은 상태 변화를 알려줄 내용을 정의하는 것이다?
• type 은 필수이고, data 를 넣어 인자로 전달 가능

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

• 현재의 상태와, 전달 받은 액션을 참고해서 새로운 상태를 반환하는 함수

• INCREASE 액션이 오면 리듀서에서 새로운 상태를 반환한다. return state + 1

dispatch( { type: "INCREASE" } );

• 액션을 발생시키는 함수이다.

• 액션은 변화를 일으킬 때, 어떤 변화를 일으킬 지 정의하는 부분이고
리듀서는 액션에 따른 상태를 변화시킨다.
디스패치는 정의된 액션을 발생시키는 역할이라고 생각하면 된다.
즉, 디스패치가 액션을 발생시키면 리듀서를 통해 새로운 상태를 만들어준다.

• 한 App의 상태(state) 를 의미한다.

subscribe(() => console.log("액션이 디스패치되면 실행");

• 액션이 디스패치 되었을 때 마다(상태가 변할 때 마다) 호출할 함수(콜백 함수)를 등록하는 기능

• 옵저버 패턴에서 구독하는 기능

옵저버 패턴

옵저버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다.

$button1.addEventListener("click", () => console.log("button1 click");
$button2.addEventListener("click", () => console.log("button2 click");

리덕스

import { createStore } from "redux";

// 리덕스를 사용하기 위한 정의
/* 리덕스에서 관리 할 상태 정의 */
const initialState = {
  counter: 0
};

/* 액션 타입 정의 */
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";

/* 액션 생성함수 정의 */
// const increase = () => ({ type: INCREASE });
// const decrease = () => ({ type: DECREASE });

/* 리듀서 만들기 */
// 리듀서는 새로운 상태를 생성하는 함수.
function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        counter: state.counter + 1
      };
    case DECREASE:
      return {
        ...state,
        counter: state.counter - 1
      };
    default:
      return state;
  }
}


// 여기부터 redux 사용
/* 스토어 만들기 */
const store = createStore(reducer);
store.subscribe(() => console.log(`상태 변경`));

// 현재 상태 가져옴
console.log(store.getState()); // {counter: 0}
// dispatch 와 액션을 통해 현재 상태 변경
store.dispatch({ type: "INCREASE" }); // dispatch 를 호추할 때마다 '상태 변경' 문구 출력
store.dispatch({ type: "INCREASE" }); // dispatch 를 호추할 때마다 '상태 변경' 문구 출력

console.log(store.getState()); // {counter: 2}

• 리덕스를 사용하기 위해 리듀서는 필수로 필요하다.

• 스토어를 만들기 위해 createStore 함수를 이용하여 store 생성했고,
store 는
dispatch 를 이용하여 액션을 발생시키고
getState 를 사용하여 현재 상태를 가져오고
subscribe 를 통해 상태가 변화때마다(액션을 호출할 때마다) 특정 기능을 수행할 수 있게 한다.
즉, store 안에는 getState, dispatch, subscribe 함수가 있어야한다.

export function createStore(reducer) {
  let state; // 상태
  const listeners = new Set(); // 구독 내용을 관리하는 부분 

  const getState = () => ({ ...state }); // 현재 상태를 가져오는 기능

  const dispatch = (action) => { // 액션을 발생키시는 dispatch 기능
    state = reducer(state, action);
    publish();
  };

  const subscribe = (fn) => listeners.add(fn); // 구독 기능하는 기능
  const publish = () => listeners.forEach((fn) => fn()); 
  // 상태가 변경되면(액션을 호출(dispatch)) 등록된 구독 내용(listeners) 을 수행하귀 위한 기능 

  return { // 클로저를 통해 store 에서 사용하는 getState, dispatch, subscribe 만 제공
    getState,
    dispatch,
    subscribe,
  };
}

• 리덕스는 결국 상태 관리를 위한 라이브러리 이므로 결국 상태가 필요하다.
여기서는 state 변수

• 옵저버 패턴의 기능인 구독(subscribe)과 알림(publish) 기능 제공

• 현재 store 의 상태를 가져오기 위한 getState,
액션을 발생시키는 dispatch 기능 제공

• 마지막으로 state 를 누구나 사용하거나 변경하면 안되기 때문에 클로저를 이용하여 private 로 관리구현했다.

카운터 구현하기

App 컴포넌트로 구현

• App 은 하나의 컴포넌트(App) 에서 모든 것을 처리하도록 구현했다.

• redux.js 파일이 리덕스 관련된 기능
modules/counter.js 파일에는 초기값, 액션 타입, 리듀서 등 리덕스에서 사용하는 기능
store.js 에는 리덕스를 이용하여 상태를 생성하는 부분을 정의했다.

// core/redux.js
export function createStore(reducer) {
  let state;
  const listeners = new Set();

  const getState = () => ({ ...state });

  const dispatch = (action) => {
    state = reducer(state, action);
    console.log('update state', state);
    publish();
  };

  const subscribe = (fn) => listeners.add(fn);
  const publish = () => listeners.forEach((fn) => fn());

  return {
    getState,
    dispatch,
    subscribe,
  };
}

• 위에서 설명한 redux 기능 이다.

// modules/counter.js

// 액션 타입 정의
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const SET_DIFF = 'SET_DIFF';

// 액션 생성 함수
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });
export const setDiff = (payload) => ({ type: SET_DIFF, payload });

// 초기화 코드
const initialState = {
  diff: 1,
  number: 0,
};

// 리듀서 정의
export default function countReducer(state = initialState, action = {}) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        number: state.number + state.diff,
      };
    case DECREASE:
      return {
        ...state,
        number: state.number - state.diff,
      };
    case SET_DIFF:
      return {
        ...state,
        diff: action.payload,
      };
    default:
      return state;
  }
}

• 리덕스에서 사용할 리듀서와 상태 변화를 위한 액션 등을 정의했다.

// store.js
import { createStore } from './core/redux.js'; // redux

import countReducer from './modules/counter.js';

const counterStore = createStore(countReducer);
counterStore.dispatch(); // reudx에서 초기 데이터를 설정하기 위한 요청

export { counterStore };

• 웹 서비스에 필요한 store 를 생성하고 관리하기 위한 공간이다.

• 초반에 dispatch를 해줬는데 초기 데이터를 설정하기 위함이다.
왜냐하면 리듀서에서 존재하지 않은 액션은 default 값으로 빠지는데 state 에 default 파라미터를 설정해서 초기화를 했다.
 

// App.js
import { $ } from './utils/util.js';
import Component from './core/Component.js';
import { counterStore } from './store.js';

import { decrease, increase, setDiff } from './modules/counter.js'; // 액션 생성 함수 를 통해 액션 정의

export default class App extends Component {
  constructor(...rest) {
    super(...rest);

    counterStore.subscribe(this.render.bind(this));
		// 구독 기능을 통해 상태가 변하면 해당 컴포넌트를 렌더링하게 함.(상태 변하면 DOM 을 다시 그림)
  }

  template() {
    const { diff, number } = counterStore.getState();

    return `
      <div class="container">
        <h1>Counter</h1>
        <form class="setDiffForm">
          <input class="diffInput" type="number" placeholder="1" value="${diff}"/>
          <button class="diffSubmit" type="submit">diff 설정</button>
        </form> 
        <h2 class="counter">${number}</h2>
        <button class="increaseBtn">+1</button>
        <button class="decreaseBtn">-1</button>
      </div>
    `;
  }

  componentDidMount() {
    $('.increaseBtn').addEventListener('click', () => counterStore.dispatch(increase()));
    $('.decreaseBtn').addEventListener('click', () => counterStore.dispatch(decrease()));
    $('.setDiffForm').addEventListener('submit', this.handleChangeDiff);
  }

  handleChangeDiff(event) {
    event.preventDefault();

    const diff = $('.diffInput')?.value;
    if (!diff) return;

    counterStore.dispatch(setDiff(+diff));
  }
}

• 기존 Component 기능에서 redux를 적용했다.

• 주의할 점은 생성자에서 구독 기능을 등록했다.

자세한 코드는 Github Repo 를 참고하면 된다.

Counter 컴포넌트를 컴포넌트로 분리하여 구현하기

// App.js

import { $ } from './utils/util.js';
import Component from './core/Component.js';

import Counter from './components/Counter.js';
import InputDiff from './components/InputDiff.js';

import { counterStore } from './store.js';

export default class App extends Component {
  constructor(...rest) {
    super(...rest);
  }

  template() {
    return `
      <h1>Counter</h1>
      <section class="diff-form-component"></section>
      <section class="counter-component"></section>
    `;
  }

  componentDidMount() {
    const newInput = new InputDiff($('.diff-form-component'));
    const counter = new Counter($('.counter-component'));

    counterStore.subscribe(() => {
      newInput.render(), counter.render();
    });
  }
}

• store 의 구독 기능을 Components(컴포넌트 분리) 부분에서는 componentDidMount 에서 했고,
App 부분(하나의 컴포넌트에서 관리)에서는 constructor 에서 선언했다.
그 이유는 아래와 같다. (개인 적인 의견)
App 부분(하나의 컴포넌트에서 관리)은 컴포넌트가 렌더링 되는 부분이 딱 한 곳이기 때문에 constuctor 에서 사용해도 괜찮다고 생각했다.
하지만, Components(컴포넌트 분리) 부분에서는 constructor 에서 구독 기능을 정의하면 각 컴포넌트를 생성할 때마다 각 컴포넌트의 constructor 에 작성해야 하기 때문에 Components(컴포넌트 분리)의 경우 App 컴포넌트에서 mount 될 때 등록해서 한 곳에서만 관리할 수 있게 하였다.

// components/Counter.js

import Component from '../core/Component.js';
import { decrease, increase } from '../modules/counter.js';

import { counterStore } from '../store.js';
import { $ } from '../utils/util.js';

export default class Counter extends Component {
  constructor(...rest) {
    super(...rest);
  }

  template() {
    const { number } = counterStore.getState();

    return `
      <h2 class="counter">${number}</h2>
      <button class="increaseBtn">+1</button>
      <button class="decreaseBtn">-1</button>
    `;
  }

  componentDidMount() {
    $('.increaseBtn').addEventListener('click', () => counterStore.dispatch(increase()));
    $('.decreaseBtn').addEventListener('click', () => counterStore.dispatch(decrease()));
  }
}

// components/InputDiff.js

import { $ } from '../utils/util.js';
import Component from '../core/Component.js';
import { counterStore } from '../store.js';

import { setDiff } from '../modules/counter.js';

export default class InputDiff extends Component {
  constructor(...rest) {
    super(...rest);
  }

  template() {
    const { diff } = counterStore.getState();

    return `
      <form class="setDiffForm">
        <input class="diffInput" type="number" value="${diff}" />
        <button class="diffSubmit" type="submit">diff 설정</button>
      </form>
    `;
  }

  componentDidMount() {
    $('.setDiffForm').addEventListener('click', this.handleChangeDiff);
  }

  handleChangeDiff(event) {
    event.preventDefault();

    const diff = $('.diffInput')?.value;
    if (!diff) return;

    counterStore.dispatch(setDiff(+diff));
  }
}

자세한 코드는 Github Repo 를 참고하면 된다.

reference

• https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Store/#_2-observer-pattern에-대해-이해하기

• https://yeoulcoding.tistory.com/145?category=806488

• https://react.vlpt.us/redux/01-keywords.html