자바스크립트 Redux Toolkit을 활용한 데이터 정렬 및 필터링

21 Sep 2023

redux

자바스크립트의 Redux Toolkit은 애플리케이션의 상태 관리를 효과적으로 할 수 있도록 도와줍니다. 이를 활용하여 데이터의 정렬 및 필터링을 구현하는 방법에 대해 알아보겠습니다.

데이터 정렬

Redux Toolkit에서 데이터를 정렬하는 가장 간단한 방법은 createSlice를 사용하여 슬라이스를 만든 후, createAsyncThunk를 사용하여 비동기 작업을 수행하는 것입니다. 예를 들어, 사용자 목록을 가져와서 이름으로 정렬하는 경우를 생각해 봅시다.

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

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

const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload.sort((a, b) => a.name.localeCompare(b.name));
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export const { selectAll: selectAllUsers } = usersSlice.getSelectors((state) => state.users);

export default usersSlice.reducer;

위의 코드에서 createAsyncThunk 함수를 사용하여 비동기 작업인 fetchUsers를 생성합니다. createSlice 함수를 사용하여 슬라이스를 만들고, extraReducers에서 fetchUsers.pending, fetchUsers.fulfilled, fetchUsers.rejected를 통해 비동기 액션에 대한 처리를 정의합니다. 성공적으로 데이터를 가져온 후에는 sort 함수를 사용하여 데이터를 이름으로 정렬합니다.

데이터 필터링

Redux Toolkit을 사용하면 데이터를 필터링하기 위한 간단한 메커니즘을 구현할 수 있습니다. 예를 들어, 사용자 목록에서 특정 권한을 가진 사용자만 필터링하는 경우를 생각해 봅시다.

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

const usersSlice = createSlice({
  name: 'users',
  initialState: [],
  reducers: {
    filterByPermission: (state, action) => {
      return state.filter((user) => user.permission === action.payload);
    },
  },
});

export const { filterByPermission } = usersSlice.actions;

export const selectUsers = (state) => state.users;
export const selectFilteredUsers = createSelector(
  selectUsers,
  (users) => users.filter((user) => user.permission === 'admin')
);

export default usersSlice.reducer;

위의 코드에서 createSelector 함수를 사용하여 데이터를 필터링할 수 있도록 설정합니다. filterByPermission reducer를 정의하여 사용자 목록을 특정 권한으로 필터링할 수 있습니다. selectFilteredUsers selector를 통해 필터링된 사용자 목록을 가져올 수 있습니다.

마무리하며

Redux Toolkit을 사용하면 자바스크립트 애플리케이션에서 데이터의 정렬 및 필터링을 간단하고 깔끔하게 구현할 수 있습니다. 이를 통해 사용자 경험을 개선하고 애플리케이션의 성능을 향상시킬 수 있습니다.

#javascript #redux #reduxtoolkit #데이터정렬 #데이터필터링