자바스크립트에서 state를 관리할 수 있게 해주는 상태관리 라이브러리이다.
React 등 여러 라이브러리에서 사용할 수 있다.
나는 리액트에서 사용하려고 공부한다..!
npm install redux
import { createStore } from "redux";
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
number.innerHTML = 0;
// type을 상수로 관리
// js가 아닌 typescript로 많이들 사용하는 이유를 알게됐다.
const ADD = "ADD";
const MINUS = "MINUS";
// reducer
const countModifier = (count = 0, action) => {
switch (action.type) {
case ADD:
return count + 1
case MINUS:
return count - 1;
default:
return count;
}
};
// store 생성
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);
import { createStore } from "redux";
const storeName = createStore(Reduce);
const reducerName = (state, action) => {
if (action.type === "ADD") {
return count + 1;
}
};
상태를 바로 변경하지 않고, Action이라 불리는 객체를 통해 일어날 변경을 명시한다. 그리고 각각의 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 결정하는 함수인 Reducer를 작성한다.
storeName.dispatch({ type: "ADD" });
storeName.subscribe(function);