[Redux] createStore 사용해보기

Redux에서 State를 관리하기 위한 방법.

아래와 같이 import 하여 사용한다.

import { createStore } from "redux";

 

간단한 카운팅 기능 구현을 위해 store를 선언해준다.

createStore 함수를 통해 선언하며 매개변수로 reducre 라는함수를 보내주어야한다.

※현재 redux 측으로 부터 createStore는 deprecated 처리되었다. 그러나 사용에는 문제가 없으니 무시해도 상관없다.

// reducer 첫째 인자는 값, 둘째 인자는 값을 제어해 주기 위한 object 변수이다.
const countModifier = (count = 0, action) => {
	return count;
}

const countStore = createStore(countModifier);

console.log(countStore);

생성된 countStore 안에는 5가지 함수가 들어있는데 이를 통해 값을 제어할 수 있다.

 

1. getState() : 현재 state 값이 출력된다

console.log(countStore.getState()); // 출력 : 0

 

2. dispatch() : reducer의 action 에 값을 보낼 수 있다. (반드시 object)

count 값 변경을 위해 덧셈 뺄셈 기능을 추가 하도록 한다.

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

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

console.log(countStore.getState()); // 출력 : 1

countStore.dispatch({ type: "MINUS" });

console.log(countStore.getState()); // 출력 : 0

reducer 에서 return해주는 값은 그대로 첫번째 인자인 state의 값으로 들어간다.

 

3. subscribe : state 값에 변화가 있을 때 마다 호출된다.

countStore.subscribe(() => console.log(countStore.getState()));

countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "MINUS" });

앞서 dispatch 해줄 때 마다 getState 를 통해 값을 확인 할 필요없이 자동으로 subscribe 안의 함수가 실행된다.