[Redux] 시작하기

1. Redux란?

자바스크립트에서 state를 관리할 수 있게 해주는 상태관리 라이브러리이다.

React 등 여러 라이브러리에서 사용할 수 있다.
나는 리액트에서 사용하려고 공부한다..!
npm install redux

2. vanilla 예제

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

3. 정리

1. import 한다.

import { createStore } from "redux";

2. Store를 생성한다.

const storeName = createStore(Reduce);

• store를 사용하기 위해서 Reducer 함수가 꼭 필요하다.

3. Reducer를 생성한다.

const reducerName = (state, action) => { 
  if (action.type === "ADD") {
    return count + 1;
  }
};

상태를 바로 변경하지 않고, Action이라 불리는 객체를 통해 일어날 변경을 명시한다. 그리고 각각의 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 결정하는 함수인 Reducer를 작성한다.

• data를 바꾸고 수정할 수 있다.
• Reducer 함수만 데이터를 수정하고 바꿀 수 있다.
• action은 함수를 부를 때 쓰는 두번째 인자이자 인수이다.

4. dispatch

storeName.dispatch({ type: "ADD" });

• 액션을 발생 시킨다.

5. subscribe

storeName.subscribe(function);

• subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있다.