Redux 사용해보기 (Counter 예제)

오늘은 리덕스를 사용해서 Counter예제를 한번 배워 볼 것이다.

리액트로 Redux를 사용하기 전에 바닐라 JS로 리덕스를 이해하는 코드를 작성해 보자.

 

먼저 Store라는 개념을 이해해 볼 것인데, 말 그대로 스토어는 스토어이다.

애플 앱스토어에서 자신이 원하는 앱을 다운로드하여서 쓸 수 있는데, 사실 앱스토어와 크게 다를 게 없다.

 

스토어에서는 state을 저장시키는 곳이다.

 

위 그림을 보면 쉽게 이해할 수 있을 것이다.

각 컴포넌트에 state를 주고받는 모습을 볼 수 있다.

 

그래서 리덕스에서 스토어를 어떨게 만드냐? 

 

바로 createStore이라는 함수를 사용하면 된다.

리덕스에서 createStore라는 것을 추출해와서

요런 식으로 사용해주면 된다.

 

여기서 countModifier는 reducer인데, 기본적으로 createStore를 하면 reducer를 기본으로 요구한다.

즉, createStore를 해주면 reducer가 필수적이라는 것이다

 

리듀서를 안 준다면? 당연히 오류가 난다.

 

리듀서, 리듀서 거리는데 리듀서의 개 넘을 잡고 넘어가겠다.

 

리듀서란, store에 있는 state들을 수정할 수 있게 해 주는 함수이다. 리듀서는 프로그래머가 직접 만들어야 하며,

이런 식으로 리듀서를 작성해줄 수 있다.

여기서 state = 0이라는 문법은 state가 값이 없을 때, 기본값을 0으로 설정한다는 ES6문법이다.

 

그리고 action이라는 인자 값을 받는데, 각각 액션에 따른 state변경을 볼 수 있다.

action의 type이 ADD일 때 기존에 있던 state에 1을 더하고, MINUS일 때 1을 빼고 

이런 식으로 switch문을 돌린다.

 

그리고 ADD도 , MINUS도 아닐 경우에는 그냥 state를 반환한다.

 

그럼 액션은 어디서 주는데? 

 

바로 액션을 발생시키는 함수 dispatch를 쓰면 된다

 

store에 기본적으로 내장되어있는 함수인 dispatch는 액션을 발생시키고 { type :"ACTION"}을 파라미터로 받는다

그럼 reducer에 액션이 전달되고 그 액션 값에 따른 작업을 한다.

 

이제 store에 있는 state를 가져오는 작업을 할 건데, 그 작업은 store에 내장되어있는 함수인 getState()를 사용하면 현제 

store에 state를 리턴해주는데, 

이런 식으로 작업하고 yarn start 해보면 첫 빌듯이 성공적으로 state값으로 뜨는 것을 볼 수 있다.

근데 막상 ADD , MINUS 눌러보면 자동 렌더링이 되지 않는 모습을 볼 수 있다.

 

이때 store에 내장되어있는 함수인 subscribe()를 사용하면 된다

 

subscribe는 파라미터를 하나 받는데 

이런 식으로 콜백 함수를 넣어주면 실시간으로 값이 바뀌는 모습을 볼 수 있다.

 

전체코드 - JavaScript

import { createStore } from "redux";

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

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

const countStore = createStore(countModifier);

number.innerText = countStore.getState();

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

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

countStore.subscribe(onChange);