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

16.1 개념 미리 정리하기

16.1.1 액션

상태에 어떠한 변화가 필요하면 액션이란 것이 발생함. 

{
	type : 'TOGGLE_VALUE'
}

16.1.2 액션 생성 함수

액션 객체를 만들어 주는 함수

//일반함수 형태
function addTest(data) {
	return {
    	type : 'ADD_TEST',
        data
    }
}

//화살표함수 형태
const addTest = text => ({
	type : 'ADD_TEST',
    text
});

16.1.3 리듀서

리듀서는 변화를 일으키는 함수. 액션을 만들어서 발생시켜면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옴. 그리고 두 값을 참고하여 새로운 상태를 반환해줌.

const initialState = {
	data : 1
};

function reducer(state = initialState, action) {
	switch (action.type) {
    	case ADD : 
        	return {
            	data : state.data + 1
            };
        default :
        	return state;
    }
}

16.1.4 스토어

리덕스를 적용하기 위해 스토어를 만듬. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에 몇 가지 중요한 내장 함수를 지님.

16.1.5 디스패치

스토어의 내장 함수 중 하나. 액션을 발생시키는 것. dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출함. 이는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줌.

16.1.6 구독

스토어의 내장 함수 중 하나. subscribe 함수 안에 리스터 함수를 파라미터로 넣어서 호출해 주면 이 함수가 액션이 디스패치되어 상태가   업데이트될 때마다 호출됨.

16.2 리액트 없이 쓰는 리덕스

16.3 리덕스의 세 가지 규칙

16.3.1 단일 스토어

하나의 애플리케이션 안에는 하나의 스토어가 들어 있음.

16.3.2 읽기 전용 상태

상태를 업데이트할 때 기존 객체를 건드리지 않고 새로운 객체를 생성해 주어야 함. (리덕스가 내부적으로 데이터 변경 감지를 위해 얕은 비교 검사를 하기 때문)

16.3.3 리듀서는 순수한 함수

순수한 함수는 다음 조건을 만족해야함.

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음.
• 파라미터 외의 값에는 의존하면 안 됨.
• 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환함.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 함.