리덕스 라이브러리 이해하기

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.

액션

상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하낭의 객체로 표현됩니다.

리듀서

리듀서는 변화를 일으키는 함수입니다. 액션을 만들어서 발생시키면 리듀서가 현재 사애와 전달받은 액션 객체를 파라미터로 받아 옵니다.

리액트 없이 쓰는 리덕스

const { createStore } = require("redux");

const divToggle = document.querySelector('.toggle');
const counter = document.querySelector('h1');
const btnIncrease = document.querySelector('#increase');
const btnDecrease = document.querySelector('#toggle');

//액션 타입과 액션 생성 함수 정의
const TOGGLE_SWITCH = 'TOGGLE_SWITCH';
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

const toogleSwitch = () => ({type: TOGGLE_SWITCH});
const increase = () => ({type: INCREASE, defference});
const decrease = () => ({type:DECREASE});

//초기값 설정
const initialState = {
    toogle: false,
    counter: 0
};

//리듀서 함수 정의
//state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
    //action.type에 따라 다른 작업을 처리함
    switch(action.type) {
        case TOGGLE_SWITCH:
            return {
                ...state, //불변성 유지를 해 주어야 합니다.
                toggle: !state.toggle
            };
        case INCREASE:
            return {
                ...state,
                counter: state.counter + action.difference
            };
        case DECREASE:
            return {
                ...state,
                counter: state.counter - 1
            };
        default:
            return state;    
    }
}

//스토어 만들기
const store = createStore(reducer);

//render 함수 만들기 이 함수는 상태가 업데이트될 때만다 호출
const render = () => {
    const state = store.getState()// 현재 삳태를 불러 옵니다.
    //토글처리
    if(state.toogle) {
        divToggle.classList.add('active');
    }else {
        divToggle.classList.remove('active');
    }
    //카운터 처리
    counter.innerText = state.counter;
}
render();

//구독하기
store.subscribe(render);

//액션 발생시키기 (디스패치)
divToggle.onclick = () => {
    store.dispatch(toggleSwitch());
};
btnIncrease.onclick = () => {
    store.despatch(increase(1));
};
btnDecrease.onclick = () => {
    store.dispatch(decrease());
};

리덕스의 세 가지 규칙

1. 단일 스토어
2. 읽기 전용 상태
3. 리듀서는 순수한 함수