개념 정리

액션

• 상태에 어떤 변화가 필요하면 액션이라는 것이 발생
• 반드시 type 필드를 가지고 있어야 함
  • 액션의 이름 필수

 

리듀서

• 변화를 일으키는 함수
• 액션을 만들어서 발생 => 리듀서 : 현재 상태, 전달받은 액션 객체를 파라미터로 받음 => 두 값을 참조하여 새로운 상태로 만들어서 반환
• 예제

const initialState = {
	counter : 1
};

function reducer(state = initialState, action) {	//현재 상태, 액션객체를 파라미터로 받음
	switch(action.type) {
    	case INCREMENT :
        	return{
            	counter : state.counter + 1		//새로운 상태를 만들어 반환
            };
        default :
        	return state;						//새로운 상태를 만들어 반환
    }
}

 

 

스토어

• 프로젝트에 리덕스를 적용하기 위해 스토어 생성
• 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음
• 스토어 안의 구조
  • 현재 애플리케이션 상태, 리듀서가 들어가 있음
  • 중요한 내장 함수
    • 디스패치 (dispatch)
    • 구독 (subscribe)

 

 

디스패치

• 스토어의 내장 함수 중 하나
• 디스패치 = 액션을 발생시키는 것
• 액션 객체를 파라미터로 넣어서 호출 => 리듀서 함수를 실행(새로운 상태로 만들어줌)
  • ex) dispatch(action)

 

구독

• 스토어의 내장 함수 중 하나
• subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출 => 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출
• 예제

const listener = () => {
	console.log('상태 업데이트');
}


//subscribe함수 안에 리스너 함수를 파라미터로 넣어서 호출
//액션이 디스패치되어 상태가 업데이트될 때마다 이 리스너 함수가 호출됨.
const unsubscribe = store.subscribe(listener);

unsubscribe();		//추후 구독을 비활성화할 때 함수를 호출.