리덕스를 사용한 바닐라 Counter

1. Store & Redux

기본세팅

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

let count = 0;
number.innerText = count;

const updateText = () => {
  number.innerText = count;
};

const handleAdd = () => {
  count = count + 1;
  updateText();
};

const handleMinus = () => {
  count = count - 1;
  updateText();
};

add.addEventListener("click", handleAdd);
minus.addEventListener("click", handleMinus);

yarn add redux 입력하여 redux 설치

Store

import { createStore } form "redux"

(1) CreateStore

나의 data(state)를 넣는 함수
=> 나의 data를 넣을 수 있는 곳을 생성함
=> 나에게 reducer를 주기를 요구함
=> dispatch, subscribe, getState, replaceReducer 네 개의 함수가 들어 있음
state: 나의 application에서 바뀌는 data

(2) reducer

나의 data를 modify하는 함수
return 하는게 data가 됨(getState로 확인)
=> 유일하게 data를 바꿀 수 있는 곳

• 코드 작성

import { createStore } form "redux"

...

const reducer = (state = 0) => {
	return state;
}

const store = createStore(reducer)

...

2. Actions

(1) 어떻게 state를 modify 할까?

action을 사용해서 +1, -1 등으로 modify 할 수 있음
=> action
: redux에서 function을 부를 때, 두 번째 parameter || argument
: reducer와 소통하기 위한 방법

(2) dispatch

액션을 보내기

store.dispatch({type: "HELLO"})
"HELLO" action을 reducer에게 dispatch하면 reducer가 motify를 함

• 코드 작성

import { createStore } form "redux"

...

const reducer = (state = 0, action) => {
	if (action.type === "ADD") {
    	return state + 1;
    } else if (action.type === "MINUS") {
    	return state - 1;
    }
	return state;
}

const store = createStore(reducer)

store.dispatch({type: "ADD"})

...

3. Subscriptions

(1) dispatch를 이벤트 리스너로 연결

...

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

...

const handleAdd = () => {
	store.dispatch({ type: "ADD" }))
}

const handleMinus = () => {
	store.dispatch({ type: "MINUS" }))
}

add.eventListener("click", handleAdd)
minus.eventListener("click", handleMinus)

=> 함수를 사용하는 것이 깔꼼함

(2) subscribe

store 안에 있는 변화들을 감지
store.subscribe(func);
store.subscribe(store.getState());
=> store 안의 변화를 감지하면 function 실행
=> 이를 통해, html에 modify 가능

... 

const onChange = () => {
	number.innerText = store.getState
}

store.subscribe(onChange)

...

4. Recap Refactor

(1) Recap

• reducer : 현재 상태의 application과 함께 불려지는 function (+ with action)
  return하는 것은 application의 state가 됨

• action : reducer와 소통하는 방법으로 Object여야 하며 그 key 이름은 항상 type임 (바꿀 수 없음)

• dispatch : reducer에게 action을 보내는 방법

• subscribe : store의 변화를 감지하면 인자값으로 준 함수를 실행

(2) Refactor

➕ reducer를 보기 좋게 만들어 보쟝

if else 구문 대신 switch 구문으로 변경

const countModifier = (count = 0, action) => {
  switch (action.type) {
    case ADD:
      return count + 1;
    case MINUS:
      return count - 1;
    default:
      return count;
  }
};

➕ action은 선언 후에 사용하쟝

string을 사용하는 것보다 에러 발견에 용이함

const ADD = "ADD";
const MINUS = "MINUS";