자바스크립트 Redux Toolkit을 활용한 코드의 가독성 향상하기

21 Sep 2023

redux

자바스크립트 개발에서 Redux는 상태 관리를 위한 강력한 도구입니다. 그러나 Redux를 사용하다 보면 많은 boilerplate 코드를 작성해야 하는 경우가 많습니다. 이러한 boilerplate 코드는 코드의 가독성을 떨어뜨리고 유지 보수를 어렵게 만드는 요인이 될 수 있습니다.

이러한 문제를 해결하기 위해 Redux Toolkit이라는 훌륭한 라이브러리가 있습니다. Redux Toolkit은 Redux의 일부 기능을 추상화하여 사용하기 쉽게 만들어줍니다. 이를 통해 코드의 가독성을 향상시킬 수 있습니다.

Redux Toolkit의 기능

configureStore: Redux 스토어를 설정하는 데 사용되는 함수입니다. 기본적인 Redux 스토어 설정을 자동으로 처리해줍니다.

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
}); 

createSlice: Redux 리듀서와 액션을 생성하는 데 사용됩니다. 리듀서와 액션을 하나의 파일에서 정의할 수 있어서 코드의 구조를 단순화시킵니다.

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

createAsyncThunk: 비동기 작업을 처리하는 액션 생성자를 생성하는 데 사용됩니다. 액션 생성자를 통해 API 호출 등의 비동기 작업을 처리할 수 있습니다.

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

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://api.example.com/posts');
  const data = await response.json();
  return data;
});

위와 같이 Redux Toolkit을 활용하면 Redux 관련 코드를 간결하게 작성할 수 있습니다. 이를 통해 가독성을 향상시키고 유지 보수를 용이하게 만들 수 있습니다.

#Redux #ReduxToolkit