액션, 리듀서, 스토어의 역할 및 기본 상태 관리

액션, 리듀서, 스토어는 상태 관리를 위한 중요한 개념으로, 주로 Redux 라이브러리에서 사용됩니다.

1. 액션 (Action):

액션은 상태에 어떤 변화가 필요한지 나타내는 객체입니다. 액션 객체는 type 필드를 가지고 있어야 하며, 추가적인 데이터를 포함할 수도 있습니다.

// 액션 예제
const incrementAction = {
  type: 'INCREMENT',
  amount: 1,
};

const decrementAction = {
  type: 'DECREMENT',
  amount: 1,
};

2. 리듀서 (Reducer):

리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다. 이 함수는 순수 함수로 작성되어야 하며, 이전 상태를 변경하지 않고 새로운 상태를 반환해야 합니다.

// 리듀서 예제
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.amount;
    case 'DECREMENT':
      return state - action.amount;
    default:
      return state;
  }
};

3. 스토어 (Store):

스토어는 상태를 관리하는 객체로, 액션과 리듀서를 이용하여 상태를 변경하고, 상태에 변화가 있을 때 등록된 함수(리스너)들을 호출합니다. Redux에서 스토어를 생성하려면 createStore 함수를 사용합니다.

import { createStore } from 'redux';

const store = createStore(counterReducer);

기본 상태 관리 흐름:

1. 액션 디스패치 (Action Dispatch):
   • 사용자 또는 시스템 이벤트에 의해 액션을 생성하고, store.dispatch(action)을 호출하여 액션을 스토어에 전달합니다.

store.dispatch(incrementAction);
store.dispatch(decrementAction);

2. 리듀서 실행 (Reducer Execution):
   • 스토어는 현재 상태와 전달받은 액션을 리듀서에 전달하고, 리듀서는 새로운 상태를 반환합니다.

// 초기 상태: 0
console.log(store.getState()); // 0

// INCREMENT 액션 디스패치 후 상태: 1
store.dispatch(incrementAction);
console.log(store.getState()); // 1

// DECREMENT 액션 디스패치 후 상태: 0
store.dispatch(decrementAction);
console.log(store.getState()); // 0

3. 상태 업데이트 및 리스너 호출 (State Update and Listener Invocation):
   • 리듀서가 새로운 상태를 반환하면 스토어는 내부 상태를 업데이트하고, 등록된 리스너(구독자) 함수들을 호출합니다.

store.subscribe(() => {
  console.log('State updated:', store.getState());
});

store.dispatch(incrementAction);
// 출력: State updated: 1

Redux와 같은 상태 관리 라이브러리를 사용하면 여러 컴포넌트 간의 상태 공유와 관리가 용이해지며, 예측 가능하고 디버깅이 쉬운 코드를 작성할 수 있습니다.