Redux Toolkit 튜토리얼 (1) - 이상원 기술 블로그

리덕스란?

Redux란 action이라는 이벤트를 사용하여 애플리케이션의 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리입니다. 전역에서 사용되는 상태를 위한 중앙 저장소 역할을 하며, 예측 가능한 방식으로만 상태를 업데이트할 수 있도록 규칙을 사용합니다.

리덕스는 다음과 같은 경우 유용합니다.

여러 컴포넌트에서 필요한 여러 상태가 있는 경우
상태가 시간이 지남에 따라 자주 업데이트되는 경우
상태 업데이트 로직이 복잡한 경우

Actions

액션은 타입 필드가 있는 자바스크립트 객체입니다. 애플리케이션에서 발생하는 일을 설명하는 이벤트 역할을 하며, type에는 일반적으로 domain/event로 작성됩니다. 추가 정보가 포함될 수 있는데 보통 payload 필드에 넣는 것이 관례입니다.

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk',
};

Reducers

리듀서는 state와 action을 인자로 받아 이벤트를 처리하는 함수입니다. 리듀서에서 상태를 변경할 때는 불변성을 유지해야 합니다.

const initialState = { value: 0 };
 
function counterReducer(state = initialState, action) {
  if (action.type === 'counter/increment') {
    return {
      // 기존 state를 변경하지 않습니다.
      ...state,
      value: state.value + 1,
    };
  }
  return state;
}

Store

스토어는 상태가 관리되는 저장소입니다. 컴포넌트는 스토어를 통해 상태를 전달받게 됩니다.

import { configureStore } from '@reduxjs/toolkit';
 
const store = configureStore({ reducer: counterReducer });

Dispatch

store를 통해 상태를 전달한다면, dispatch를 통해 액션 타입을 스토어에 전달할 수 있습니다. 스토어는 전달받은 action으로 상태를 업데이트할 수 있게 됩니다. dispatch는 이벤트 트리거와 같습니다. 스토어에 어떤 이벤트가 발생됐는지 알리고 리듀서는 리스너처럼 작동하여 상태를 업데이트 하게 됩니다.

store.dispatch({ type: 'counter/increment' });

Selectors

selector는 스토어에서 특정 상태를 추출하는 함수입니다. selector를 통해 상태 값을 추출할 수 있습니다.

const selectCounterValue = (state) => state.value;
 
const currentValue = selectCounterValue(store.getState());
console.log(currentValue); // 2

Redux Application Data Flow

사용자가 버튼을 클릭하여 이벤트가 트리거 됩니다.
dispatch({type:counter/increment})같이 type을 전달하여 스토어에 액션을 dispatch합니다.
스토어는 이전 state와 전달된 action으로 리듀서 함수를 실행하여 반환 값으로 새 상태에 저장합니다.
스토어는 구독 중인 컴포넌트에 상태 값이 업데이트 됨을 알리고 컴포넌트는 리렌더링하여 UI를 업데이트합니다.

참조

https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts