리덕스 너무 이해 안가서 일단 노마드 코더 무료 강의를
또 들어봄.... ㅠ_ㅠ
일단 리액트랑 같이 쓰는 리덕스 말고
리덕스 자체에 대해 공부했다.
전체코드 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";
요런식으로 변수만들어주고 바꿔줌