리액트 애플리케이션에서 상태 관리를 위해 리덕스(Redux)를 사용할 때, 액션, 리듀서, 그리고 스토어는 아주 중요한 개념입니다. 각각의 역할과 사용 방법에 대해 알아봅시다.

1. 액션(Action)

액션은 상태 변화를 일으키는 객체입니다. 액션은 type 필드를 반드시 가져야 하며, 이 필드는 액션의 타입을 나타냅니다. 일반적으로 액션 생성자(action creator)를 사용하여 액션을 생성하고 반환합니다. 예를 들면 다음과 같습니다.

const ADD_TODO = 'ADD_TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  };
}

2. 리듀서(Reducer)

리듀서는 이전 상태와 액션을 받아들여 새로운 상태를 반환하는 순수 함수입니다. 리듀서 함수는 애플리케이션의 전역 상태를 변경하는 데 사용됩니다. 예시는 다음과 같습니다.

const initialState = {
  todos: []
};

function todoApp(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        todos: [...state.todos, action.text]
      };
    default:
      return state;
  }
}

3. 스토어(Store)

스토어는 전역 상태를 갖는 객체로, 액션을 디스패치(dispatch) 하고, 리듀서를 등록하며, 전역 상태에 접근할 수 있는 메서드를 제공합니다. 스토어를 생성하기 위해서는 createStore 함수를 사용합니다.

import { createStore } from 'redux';

const store = createStore(todoApp);

결론

리덕스의 핵심 개념인 액션, 리듀서, 스토어에 대해 알아보았습니다. 액션은 상태 변화를 나타내는 객체이고, 리듀서는 액션에 따라 상태를 변경시키는 함수입니다. 스토어는 전역 상태를 담고 있으며, 액션을 디스패치하여 리듀서를 호출해 전역 상태를 변경할 수 있게 해줍니다.

참고 자료: Redux 공식 문서

이제 이러한 개념들을 사용하여 리덕스를 활용한 상태 관리를 더 깊게 이해하고 활용해보세요.