React | 리덕스 키워드 정리

한장 요약

액션 타입과 액션 생성함수

액션 타입: 프로젝트의 상태에 변화를 일으키는 것이며 이름은 고유해야하며 대문자 문자열로 작성한다.

const TOGGLE = 'TOGGLE'
const ADD = 'ADD'
const DELETE = 'DELETE'

액션 생성함수 : 액션 이름을 사용하여 액션 객체를 만드는 함수, 액션 객체는 type을 반드시 갖고 있어야 하며 추후 상태 업데이트 시에 참고하고 싶은 값은 마음대로 해도 상관없다.

const toggle = () => ({ type: TOGGLE });
const add = difference => ({ type: ADD, difference });
const delete = () => ({ type: DELETE });

리듀서 함수 정의

리듀서는 변화를 일으키는 함수로 state와 action을 parameter로 받아온다.

리듀서 함수가 맨 처음 호출될 때는 state 값이 undefined 이므로 함수의 parameter에 기본값을 설정해야 한다.

리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 줘야 하며 리덕스의 상태는 최대한 깊은 구조로 진행하는 것이 좋다. (만약 불가피하게 객체의 구조가 깊어지거나 배열도 함께 다루는 경우에는 immer 라이브러리를 사용하면 좀 더 편리하다.)

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

//리듀서 함수 정의
function reducer( state = initialState, action) {
	switch(action.type) {
    	case TOGGLE:
        	return {
            	...state,
                toggle: !state.toggle
            };
    	case ADD:
        	return {
            	...state,
                counter: state.counter + action.difference
            };
        case DELETE:
        	return {
            	...state,
                counter: state.counter -1
            };
        default:
        	return state;
    }
}

스토어 만들기

스토어를 만들 때는 createStore 함수를 사용하고, import 구문을 넣어 리덕스에서 해당 함수를 불러온 후에 함수의 paramter에 리듀서 함수를 넣어줘야 한다.

import {creatorStore} from 'redux';

(...)

const store = createStore(render);

구독하기

스토어의 상태가 바뀔때마다 호출할 함수를 정하는 것을 구독하기라고 하는데 리액트를 다루는 기술에서는 render 함수를 작성하여 사용하였다. 

책에서는 subscribe 함수를 직접 사용해서 render 함수를 구독하였지만 추후 프로젝트에서 사용할 때는 리덕스 상태를조회하는 과정에서 react-redux 라는 라이브러가 이 작업을 대신 해주기에 사용하지 않는다고 한다.

const render = () => {
	...
}

render();
store.subscribe(render);

액션 발생시키기

액션을 발생시키는 것을 디스패치라고 하는데 스토어의 내장 함수인 dispatch 를 사용한다.

(...)

toggleBtn.onclick = () => {
	store.dispatch(toggle());
}
addBtn.onclick = () => {
	store.dispatch(add(1));
}
deleteBtn.onclick = () => {
	store.dispatch(delete());
}

💡 본 포스팅은 리액트를 다루는 기술 16장 리덕스 라이브러리 이해하기 를 참고하였습니다.