PURE REDUX: COUNTER

리덕스 너무 이해 안가서 일단 노마드 코더 무료 강의를
또 들어봄.... ㅠ_ㅠ
일단 리액트랑 같이 쓰는 리덕스 말고
리덕스 자체에 대해 공부했다.
전체코드 index.js부분은 이러하다

import { createStore } from "redux";

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

number.innterText = 0;

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

const countStore = createStore(countModifier);

const onChange = () => {
  number.innerText = countStore.getState();
};
countStore.subscribe(onChange);

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

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

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

제일 중요한 코드 부분은 바로 여기! reducer 부분인데
application 현재상태와 함께 불려지는 function이다
지금 현재 상태 없으니 여기서는 =0으로 설정된것!
그리고 항상 저렇게 action과 함께 불림.

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

여기서 action이 무엇일까?
countModifier 이 함수와 소통하는 방법이라고 한다.

참고로 리덕스에서는 reducer부분에만 data가 저장되어 있는 것이고
reducer에서 무엇을 return하든지 그것이 나의 application data가 되는것이다 ~ 다른 말로 application의 state!

그렇다면 reducer에 action을 어떻게 보내는걸까?
바로 dispatch를 이용함!

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

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

여기 이렇게 dispatch가 있는 코드가 있다.
디스패치가 reducer를 call 하고 current state와 action을 보내는거임

그리고 또 중요한것!
action은 무조건 object이어야 함!!!

{ type: "ADD" }

요런식으로 들어가있는걸 볼 수 있다!
여기에서 알 수 있듯이 항상 type을 가짐 ㅋㅋㅋㅋ

그리고 subscribe라는 개념이 또 있는데
이건 store안에 있는 변화들을 알게 해주는 아이이다.

개념은 여기까지고 맨위에 썼던 전체적인 코드를 REFACTORING 해줄 수 있는데 일단 if else 구문을 이렇게 switch로 바꿔줄 수 있다.
리덕스 공식 문서에 switch로 쓰라고 되어있다 함..
나중에 직접 공식문서 한 번 봐야겠음

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

이렇게....그리고 지금은 위에 보듯이 "ADD" "MINUS"
이런식으로 string을 써주는데

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

요런식으로 변수만들어주고 바꿔줌