[Redux - 4] Reducer

리덕스의 reducer는 애플리케이션의 상태를 변경하는 데 핵심적인 역할을 하는 함수입니다. 

액션 객체를 받아 상태의 변화를 정의하는 역할을 합니다.

기본 원칙

1. 순수 함수

Reducer는 순수 함수여야 합니다. 

같은 인풋에 대해서는 항상 같은 아웃풋을 반환하며, 외부의 상태나 변수에 의존하지 않아야 합니다.

 

2. 불변성 유지

Reducer 내에서는 상태를 직접 수정하면 안 됩니다. 

대신, 상태의 변화를 나타내는 새로운 객체를 생성하여 반환해야 합니다.

함수의 구조

가장 기본적인 다음과 같은 형태를 가지고 있습니다.

function reducer(state = initialState, action) {
  // 상태 업데이트 로직
  return newState;
}

state

현재의 상태입니다. 리듀서의 첫 실행 시 state는 undefined일 수 있으므로, 

초기 상태(initialState)를 기본값으로 설정하는 것이 일반적입니다.

action

디스패치된 액션 객체입니다. 

대부분의 경우 type 프로퍼티를 가지고 있어, 어떤 액션인지 구분할 수 있습니다.

Reducer 내의 로직

리듀서 내에서는 전달된 액션의 type에 따라 상태를 어떻게 업데이트할지를 결정합니다.

JavaScript의 switch 문을 사용하는 것이 일반적입니다:

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

실제 애플리케이션에서는 여러 개의 리듀서를 정의하고 

combineReducers를 사용하여 하나의 루트 리듀서로 합칠 수 있습니다

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counter: counterReducer,
  todos: todosReducer
});

이렇게 구성된 루트 리듀서는 상태의 각 부분을 관리하는 역할을 해당 리듀서에게 위임합니다.

⚠️ 주의 사항

상태를 직접 변경하면 안 됩니다. 대신 새로운 상태 객체를 반환해야 합니다. 

배열의 경우, push, pop 등의 메서드 대신 concat, slice, 스프레드 연산자 (...) 등을 활용하여 

새로운 배열을 반환해야 합니다.

모든 가능한 액션 타입에 대해 처리 로직을 제공하는 것이 좋습니다. 

처리할 액션 타입이 없는 경우에는 기존 상태를 그대로 반환하는 것이 일반적입니다 (default case 참조).

 

리듀서는 리덕스의 핵심 원칙을 구현하는 중요한 부분입니다. 

액션에 의해 어떻게 상태가 변경되는지를 정의하므로, 애플리케이션의 로직 및 상태 관리 전략을 반영합니다.