redux-toolkit

redux-toolkit은 Redux 라이브러리를 사용하여 상태 관리를 간소화하고 효율적으로 처리할 수 있도록 하는 오픈소스 라이브러리입니다.

Redux는 단방향 데이터 흐름 패턴을 사용하여 상태를 관리합니다. 하지만 Redux의 기본 구성은 일정한 작업량이 필요합니다. redux-toolkit은 Redux의 구성을 간단하게 만들고, 코드를 짧게 만들 수 있도록 해주는 도구 모음입니다.

redux-toolkit의 주요 기능 중 하나는 createSlice 함수입니다. 이 함수는 상태와 리듀서를 생성하는데 사용됩니다. 상태는 리덕스 스토어에서 관리하는 상태를 의미하며, 리듀서는 액션을 처리하여 상태를 변경하는 함수입니다. createSlice 함수를 사용하면 상태와 리듀서를 하나의 파일에 작성하여 코드 관리를 용이하게 할 수 있습니다.

또한, redux-toolkit은 immer 라이브러리를 내부적으로 사용하여 불변성을 유지하면서 상태를 업데이트할 수 있도록 해줍니다. 이를 통해 코드 작성과 디버깅이 용이해지며, 코드의 가독성도 향상됩니다.

마지막으로, redux-toolkit은 Redux의 미들웨어를 자동으로 설정해주는 configureStore 함수를 제공합니다. 이 함수를 사용하면 Redux의 기능을 사용할 수 있는 동시에 미들웨어를 설정하는 작업을 줄일 수 있습니다.

 

 

redux를 아무 라이브러리 없이 사용할 때 (actionType 정의 -> 액션 함수 정의 -> 리듀서 정의) 1개의 액션을 생성합니다. 이렇게 필요하지만 너무 많은 코드가 생성되니 redux-actons라는 것을 사용하게 되었고, 불변성을 지켜야하는 원칙 때문에 immer를 사용하게되고, store 값을 효율적으로 핸들링하여 불필요 리렌더링을 막기 위해 reselect를 쓰게 되었으며, 비동기를 수월하게 하기위해, thunk나 saga를 설치하여 redux를 더 효율적으로 사용

 

그런데, redux-toolkit은 redux가 공식적으로 만든 라이브러리로, saga를 제외한 위 기능 모두 지원합니다. 또한 typeScript 사용자를 위해 action type, state type 등 TypeScript를 사용할 때 필요한 Type Definition을 공식 지원합니다.

 

 

-configureStore로 store를 만든다.

 - createSlice로 작은 store를 만든다. 

- actionCreator 함수를 자동으로 만들어준다. 

- immer.js가 내장 되어 있어서 불변하게 데이터를 처리하지 않아도 된다.

 

 

 

 

기존으로 진행하면

1. 액션 타입 선언

const ADD_TODO = 'todos/addTodo';

2. 액션 생성 함수 제작

function addTodoAction(payload) {
  return { type: ADD_TODO, payload };
}

3. 리듀서 업데이트

function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
}

 

 

 

 

 

 

 

 

리덕스 사용시

createSlice

사용하면

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

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    }
  }
});

export const { addTodo } = todosSlice.actions;

export default todosSlice.reducer;

액션 타입과 액션 생성 함수, 그리고 리듀서를 한 번에 생성할 수 있습니다.

이제 addTodo 액션 생성 함수를 사용하여 새로운 액션을 디스패치할 수 있습니다.

dispatch(addTodo('Buy milk'));

리덕스 툴킷은 이외에도 비동기 작업을 수행하는 createAsyncThunk 함수와 엔티티를 관리하는 createEntityAdapter 함수 등 다양한 유틸리티 함수를 제공합니다. 이러한 기능들을 사용하면 Redux 코드를 더욱 간결하고 효율적으로 작성할 수 있습니다.