Redux Toolkit을 활용한 자바스크립트 앱의 백엔드 통신 방법

21 Sep 2023

redux

작성하는 앱이 백엔드 API와 통신해야하는 경우, 자바스크립트 앱에서 백엔드와의 통신을 간단하게 관리하기 위해 Redux Toolkit을 사용할 수 있습니다. Redux Toolkit은 Redux를 사용하여 상태를 관리하는 패키지로, 백엔드와의 통신을 효율적으로 처리할 수 있는 몇 가지 기능을 제공합니다.

1. Redux Toolkit 설치하기

Redux Toolkit을 사용하기 위해서는 먼저 프로젝트에 해당 패키지를 설치해야 합니다. 다음 명령어를 사용하여 Redux Toolkit을 설치합니다.

npm install @reduxjs/toolkit

2. API 호출을 위한 Slice 생성하기

Redux Toolkit에서는 createSlice 함수를 사용하여 백엔드 API와의 통신을 위한 Slice를 생성할 수 있습니다. Slice는 액션과 리듀서를 결합한 것으로, 특정 도메인 또는 기능의 상태를 관리합니다.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  data: null,
  loading: false,
  error: null
};

const backendSlice = createSlice({
  name: 'backend',
  initialState,
  reducers: {
    fetchDataStart(state) {
      state.loading = true;
      state.error = null;
    },
    fetchDataSuccess(state, action) {
      state.loading = false;
      state.data = action.payload;
    },
    fetchDataFailure(state, action) {
      state.loading = false;
      state.error = action.payload;
    }
  }
});

export const { fetchDataStart, fetchDataSuccess, fetchDataFailure } = backendSlice.actions;

export default backendSlice.reducer;

위 예시에서는 fetchDataStart, fetchDataSuccess, fetchDataFailure라는 세 개의 액션과 함께 상태를 관리하는 Slice를 생성했습니다. fetchDataStart 액션은 데이터를 가져오는 요청을 시작하고, fetchDataSuccess 액션은 데이터를 성공적으로 가져왔을 때 호출되며, fetchDataFailure 액션은 데이터를 가져오는 과정에서 에러가 발생한 경우 호출됩니다.

3. API 호출하기

Slice를 사용하여 API 호출을 관리할 때는 Redux Toolkit에서 제공하는 createAsyncThunk 함수를 사용할 수 있습니다. 이 함수를 사용하면 통신 과정에서 비동기 작업을 관리할 수 있습니다.

import { createAsyncThunk } from '@reduxjs/toolkit';
import { fetchDataStart, fetchDataSuccess, fetchDataFailure } from './backendSlice';

export const fetchData = createAsyncThunk(
  'backend/fetchData',
  async () => {
    try {
      // 백엔드로부터 데이터를 가져오는 API 호출
      const response = await fetch('/api/data');
      const data = await response.json();
      return data;
    } catch (error) {
      throw new Error('Failed to fetch data');
    }
  }
);

export const fetchAndHandleData = () => async (dispatch) => {
  try {
    dispatch(fetchDataStart());
    const data = await dispatch(fetchData());
    dispatch(fetchDataSuccess(data.payload));
  } catch (error) {
    dispatch(fetchDataFailure(error.message));
  }
};

위의 예시에서는 fetchData라는 비동기 액션을 생성하여 API 호출을 관리합니다. fetchAndHandleData 함수에서는 fetchDataStart 액션을 호출한 후, fetchData 액션을 디스패치하여 데이터를 가져오고, 성공한 경우 fetchDataSuccess 액션을 호출합니다. 에러가 발생하면 fetchDataFailure 액션을 호출하여 에러 메시지를 저장합니다.

4. Reducer에 Slice 등록하기

마지막으로 Slice를 리듀서에 등록하여 앱 전역 상태와 연결해야 합니다. Redux Toolkit에서는 configureStore 함수를 사용하여 리듀서를 생성하고, 이를 앱의 스토어에 등록할 수 있습니다.

import { configureStore } from '@reduxjs/toolkit';
import backendReducer from './backendSlice';

const store = configureStore({
  reducer: {
    backend: backendReducer
  }
});

export default store;

위 예시에서는 backendSlice를 backend이라는 이름의 리듀서로 등록하고, 이를 앱의 스토어에 등록했습니다. 이제 store 객체를 사용하여 전역 상태에 접근할 수 있습니다.

마무리

Redux Toolkit을 사용하면 자바스크립트 앱에서 백엔드와의 통신을 간단하게 관리할 수 있습니다. createSlice와 createAsyncThunk 함수를 사용하여 API 호출을 위한 Slice와 비동기 액션을 생성하고, 리듀서에 등록하여 전역 상태를 관리할 수 있습니다. 이를 통해 앱의 백엔드 통신을 효율적으로 처리할 수 있습니다.

#redux #reduxtoolkit #백엔드통신 #자바스크립트