[Redux] Introduction & Pure Redux:Counter

Redux

Redux는 기본적으로 JavaScript Application들의 상태를 관리하는 방법

Redux가 React와 많이 사용하면서 유명해졌지만 React에 의존하는 라이브러리는 아니다!!

Angular, Vue.js, Vanilla JS에서도 모두 쓸 수 있다

 

Redux 설치

npm install redux
or
yarn add redux

 

 

Vanilla JS로 카운터 만들기

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);

 

 

 

Store는 data를 저장하는 곳

state는 우리 애플리케이션에서 바뀌는 data

위에서 만든 코드에서 찾는다면 count가 state가 된다

 

리덕스에는 createStore이라는 함수가 있다

store가 하는 일은 기본적으로 data를 넣을 수 있는 장소를 생성한다

리덕스는 data 관리를 도와주는 역할을 하기 위해 만들어졌다

위의 코드의 경우 redux가 -1이나 +1을 count 하는 걸 도와주기 위해 만들어진 것

 

createStore 함수는 reducer를 요구한다

const reducer = () => {};
const store = createStore(reducer);

 

★ reducer는 내 data를 수정하는 걸 책임지는 함수!!!

reducer에서 return 하는 게 무엇이든지 애플리케이션의 data, state가 된다

리듀서는 current state와 action과 함께 불려진다

 

 

 

modifier와 reducer이 return하는 건 애플리케이션의 data가 되는 것

☆유일하게 한 개의 함수인 countModifier만 data를 modify 할 수 있다!

 

 

※ 리덕스 최신 버전에서는 createStore에 취소선이 그어지는데 작동은 문제없다

취소선을 없애고 싶다면 legacy_createStore를 쓰면 된다

 

default값을 0으로 설정하면 첫 번째 state, default state가 0이라는 뜻

const countModifier = (count = 0) => {
  return count;
};

 

 

 

action은 redux에서 함수를 부를 때 쓰는 두 번째 인자로 reducer와 소통하는 방법

action은 object여야 한다!

 

Reducer에게 action을 보내는 방법

store.dispatch({ })로 action을 보낼 수 있다

action은 type이 있어야 하는데 다른 이름을 불가능

dispatch로 메시지를 store에 보내서 action에 넣기

 

 

 

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

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

↑ 이렇게 버튼과 dispatch를 연결해 줄 수 있다

 

 

subscribe는 store안에 있는 변화 감지

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

countStore.subscribe(onChange);

이 함수는 store에 변화가 있을 때마다 감지해서 불려지게 된다

 

 

☆ 리덕스에서는 if else문보다 switch문을 자주 사용한다

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

 

☆ string을 바로 사용하는 대신 const variable로 선언해서 사용하기

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

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