React - 리덕스 라이브러리

□ 리덕스란? 리액트 상태 관리 라이브러리

• 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 가능
• 컴포넌트끼리 똑같은 상태를 공유해야 할 때, 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달하거나 업데이트 가능(전역 상태 관리)
• 리액트 v16.3 이후 Context API가 개선되면서 단순 전역 상태 관리만 할 때는 Context API 사용해도 충분하다. BUT, 프로젝트 규모가 클 때는 코드의 유지보수성, 작업 효율 극대화 차원에서 라이브러리 사용 권장
• 리덕스는 리액트에 종속되는 라이브러리가 아니므로, 바닐라 자바스크립트와도 함께 사용될 수 있음

□ 바닐라 자바스크립트 환경에서 리덕스의 핵심 기능과 작동 원리 이해하기

1. 액션 타입과 액션 생성 함수 정의
-액션: 프로젝트 상태에 변화를 일으키는 것으로 하나의 객체로 표현됨. 액션객체는 반드시 type 값을 갖고 있어야 함

const TOGGLE_SWITCH = 'TOGGLE_SWITCH';
const INCREASE = 'INCREASE';

const toggleSwitch = () => ({type: TOGGLE_SWITCH});
const increase = difference => ({type: INCREASE, difference});

2. 초기값 정의

const initialState = {
	toggle: false,
    counter: 0
}

3. 리듀서 함수 정의
-리듀서: 변화를 일으키는 함수. state, action 값을 파라미터로 받아옴.

//state가 undefined일 때는 initialState를 기본값으로 사용
//리듀서 함수가 맨 처음 호출될 때는 state값이 undefined
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
            }
    }
}

4. 스토어 만들기
5. render 함수 만들기(render(): store 내장함수)
-render: 상태가 업데이트될 때마다 호출.

import {createStore} from 'redux';
(...)
const store = createStore(reducer);

const render = () => {
	const state = store.getState(); //현재 상태를 불러옴
    //토글 처리
    if(state.toggle){
    	divToggle.classList.add('active');
    }else {
    	divToggle.classList.remove('active');
    }
    //카운터 처리
    counter.innerText = state.counter;
};

render();

6. 구독하기(subscribe(): store 내장함수)
-스토어의 상태가 바뀔때마다 render 함수가 호출되도록
-파라미터로 함수 형태의 값을 받고, 액션이 발생하여 상태가 업데이트될 때마다 함수가 호출됨
-> react-redux 라이브러리가 이 작업을 대신 해줌

store.subscribe(render);

7. 액션 발생(dispatch(): store 내장함수)
-액션을 발생시키는 함수
-파라미터로 액션 객체

(...)
divToggle.onClick = () => {
	store.dispatch(toggleSwitch());
}
divIncrease.onClick = () => {
	store.dispatch(increase(1));
}

□ 3가지 규칙
1. 하나의 애플리케이션 안에는 하나의 스토어
2. 리덕스 상태는 읽기 전용: 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체 생성하여 불변성 유지 -> 데이터 변경 감지를 얕은 비교로 검사하고 있음
3. 리듀서 함수는 순수한 함수: 이전 상태와 액션 객체를 파라미터로 받고, 파라미터 외의 값에는 의존하면 안됨

[참고] 리액트다루는기술 by 김민준