subscribe,dispatch

Jeong Ha Seung·2021년 12월 28일

subscribe


import { createStore } from "redux";

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

const countModifier = (count = 0, action) => {
  if (action.type === "ADD") {
    return count + 1;
  } else if (action.type === "MINUS") {
    return count - 1;
  } else {
    return count;
  }
}; //data를 modify하는 function

const countStore = createStore(countModifier); //store 생성

const onChange = () => {
  number.innerText = countStore.getState(); //store 안의 변화감지
};

countStore.subscribe(onChange);

add.addEventListener("click", () => countStore.dispatch({ type: "ADD" }));
minus.addEventListener("click", () => countStore.dispatch({ type: "MINUS" }));

subscribe : store가 변할 때마다 호출

인자로 function을 받는다.

dispatch

dispatch(action)

reducer를 불러서 현재 state에 action을 발생시킨다.

0개의 댓글