Redux Toolkit을 활용한 자바스크립트 앱의 동적 UI 생성 기법

21 Sep 2023

redux

지금까지 Redux는 상태 관리를 위한 뛰어난 도구로 알려져 있습니다. 하지만 Redux를 사용하여 동적인 UI를 생성하는 것은 조금 복잡할 수 있습니다. 이러한 문제를 해결하기 위해 Redux Toolkit이라는 라이브러리가 개발되었습니다. Redux Toolkit은 Redux의 기능을 단순화하고 효율적으로 사용할 수 있는 방법을 제공합니다.

Redux Toolkit의 핵심 기능

createSlice: Redux Toolkit은 createSlice라는 메서드를 제공하여 리듀서와 액션 생성자를 한 번에 정의할 수 있습니다. 이를 통해 간결하고 직관적인 코드 작성이 가능합니다.

예시 코드:

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

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

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

configureStore: configureStore 메서드를 사용하여 Redux Toolkit을 초기화할 수 있습니다. 이 메서드는 기본적으로 Redux의 createStore 메서드를 사용하지만 여러 가지 가벼운 미들웨어와 함께 미리 구성된 스토어를 생성할 수 있도록 도와줍니다.

예시 코드:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

export default store;

Redux Toolkit을 활용한 동적 UI 생성

Redux 상태를 동적으로 변경하기 위해 Redux Toolkit의 액션 생성자를 사용합니다.

예시 코드:

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';

const Counter = () => {
  const count = useSelector(state => state.counter);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  const handleReset = () => {
    dispatch(reset());
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default Counter;

Redux Toolkit의 도우미 함수를 사용하여 상태 업데이트를 간소화할 수 있습니다.

예시 코드:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchUser } from './api';

export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  async (userId, thunkAPI) => {
    const response = await fetchUser(userId);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false },
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(fetchUserData.pending, state => {
        state.loading = true;
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      });
  },
});

export default userSlice.reducer;

Redux Toolkit의 createSlice와 configureStore을 함께 사용하여 여러 리듀서와 함께 작업할 수 있습니다.

예시 코드:

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

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      const newTodo = {
        id: Date.now(),
        text: action.payload,
        completed: false,
      };
      state.push(newTodo);
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    removeTodo: (state, action) => {
      const index = state.findIndex(todo => todo.id === action.payload);
      if (index !== -1) {
        state.splice(index, 1);
      }
    },
  },
});

const store = configureStore({
  reducer: {
    todos: todosSlice.reducer,
  },
});

export const { addTodo, toggleTodo, removeTodo } = todosSlice.actions;
export default store;

#redux #redux-toolkit