액션, 리듀서에 대해 설명해보세요. 상세 페이지

액션(Action)

상태 변경을 설명하는 명령서 객체

"무엇이 일어났는지"를 설명하는 type과 필요한 데이터(payload) 포함

const incrementAction = { type: 'INCREMENT' }

const addTodoAction = {

type: 'ADD_TODO',

payload: { id: 1, text: '할일 추가' }

}

리듀서(Reducer)

현재 상태와 액션을 받아서 새로운 상태를 반환하는 순수 함수

"상태를 어떻게 변경할지"의 로직을 담당

const counterReducer = (state = { count: 0 }, action) => {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 }

case 'DECREMENT':

return { count: state.count - 1 }

default:

return state

}

}

플로우

컴포넌트에서 액션 디스패치 리듀서가 현재 상태 + 액션으로 새 상태 계산 스토어 업데이트 후 구독 중인 컴포넌트들 리렌더링

특징:

예측 가능: 같은 입력에 항상 같은 출력

불변성: 기존 상태를 변경하지 않고 새 객체 반환

디버깅 용이: 모든 상태 변경이 액션으로 기록됨