[Redux] 바닐라 자바스크립트에서 리덕스 사용해보기

createStore()

const store = createStore(reducer);

createStore()는 전역으로 관리할 상태들을 저장하는 store를 생성한다.

 

reducer

// Action Type의 경우 미리 변수로 선언해준다. (대문자)
const ADD = 'ADD';
const MINUS = 'MINUS';

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

createStore()로 생성한 store에는 매개변수로 reducer가 필수로 들어가야 한다.

reducer에는 switch-case문을 이용해서 action.type에 따라 state를 조작할 수 있다.

 

여기서 주의할 점은 state의 초깃값이 배열과 같은 참조 타입일 경우 push() 같은 메서드로 원래 값을 조작하는 게 아닌

스프레드 연산자 등을 이용해서 무조건 새로운 값으로 return 해줘야 한다는 점이다.

 

dispatch

add.addEventListener('click', () => {
    store.dispatch({ type: ADD });
})

reducer에 action을 전달해 주는 역할을 하는 게 바로 dispatch이다.

현재 store에는 reducer가 연결되어 있고, dispatch를 통해 연결된 reducer에 {type: ADD}를 전달해 주었다.

 

subscribe

const onChange = () => {
    count.innerText = store.getState();
    // getState()를 통해 현재 state 값을 가져올 수 있다.
}

store.subscribe(onChange);

dispatch를 통해 action을 전달받은 reducer는 state 값을 +1 해주었다.

이때, state 값이 변할 때마다 함수를 동작시키고 싶다면 store.subscribe(실행시킬 함수)를 해주면 된다.

위 코드에서는 state가 변할 때마다 onChange()가 실행되도록 해주었다.

 

1. createStore(reducer)로 store를 생성
2. reducer 생성. reducer의 매개변수는 (state, action). state에는 초깃값 달아주기.
3. store.dispatch({ type: A })을 통해 reducer에 action.type 전달하기
4. store.subscribe(함수)를 통해 state가 변할 때마다 실행할 함수 매개변수에 넣기