Redux Toolkit

Redux Toolkit (줄여서 RTK 라고 한다.)은
기존 Redux 사용시 불편했던 점을 해결 하기위해 여러 추가 기능과 라이브러리를 탑재하여 나온 패키지이다.

현재 리덕스 팀에서 공식적으로 추천하는 방법이다.

기존의 Redux는 사용하기 위해 Best Practice라고 알려진 DUCKS 패턴 (필수는 아니지만)을 사용하였다.

예시 코드로, 주어진 N만큼 더하고, 빼는 카운터 module을 살펴보자.

const PLUS_N = "counter/PLUS_N"
const MINUS_N = "counter/MINUS_N"

// action creator: action value를 return 하는 함수
export const plusN = (payload) => {
  return {
    type: PLUS_N,
    payload: payload
  }
}

export const minusN = (payload) => {
  return {
    type: MINUS_N,
    payload: payload
  }
}

// 초기 상태값(state)
const initialState = {
  number: 0
}

// reducer: 'state에 변화를 일으키는' 함수
// input: state와 action
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_N:
      return {...state, number: state.number + action.payload};
    case MINUS_N:
      return {...state, number: state.number - action.payload};
    default:
      return state;
  }
}

이 코드를 RTK를 이용하여 리팩토링하면 다음과 같이 변할 수 있다.

// redux-toolkit
const counterSlice = createSlice({
  name:'counter',
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload
      return state;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload
      return  state;
    }
  }
})

export const {addNumber, minusNumber} = counterSlice.actions;
export default counterSlice.reducer;

코드가 훨씬 짧아지고 가독성이 더 좋아졌다. action과 action creator를 따로 작성하지 않아도 되며, state를 변경할 때 불변성을 지켜주지 않는 것처럼 작성해도 작동한다! 하지만, 이를 사용하기 위해서 useSelector를 사용하고, dispatch를 하는 것은 똑같다.
즉, RTK는 여전히 Redux이며 기본적인 작동 방식은 같지만 사용자의 편의성을 크게 향상 시켜서 나온 패키지이다!

설치

# react에서 사용할 경우
# redux dev tools는 RTK에 포함되어 있기 때문에 설치할 필요가 없다.

yarn add @reduxjs/toolkit react-redux

Redux에서 RTK로

기존 Redux에서 RTK 방식으로 바꾸기 위해 교체해야 할 것들이 있다.

configureStore

기존에는 createStore를 사용하여 reducer들을 결합하였다. RTK에서는 configureStore로 교체하는 것을 권장한다.

configureStore 에서는 middleware, enhanver, devtools 설정 등을 더 간단하게 할 수 있다.

createStore

const rootReducer = combineReducers({
  counter, users
});

const store = createStore(rootReducer);

export store;

configureStore

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

export default store;

https://ko.redux.js.org/usage/configuring-your-store/#the-solution-configurestore

createSlice

기존에는 action, action creator, reducer 등을 모두 각각 작성하였다. RTK에서는 createSlice 함수를 사용하여 간편하게 모두를 생성할 수 있다.

const todoSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      // 불변성을 유지시켜야 한다!
      // redux toolkit 안에 immer라는 기능이 내장되어 있다.
      // 따라서 push 같이 불변성을 유지 못하게 하는 함수도 사용할 수 있다.
      state.push(action.payload)
    }
  }
})


// export actions
export const {addTodo, removeTodo, switchTodo} = todoSlice.actions;

// export reducer
export default todoSlice.reducer;

https://ko.redux.js.org/usage/migrating-to-modern-redux/#reducers-and-actions-with-createslice

immer

지금 까지 우리는 state를 변경할 때 불변성의 원칙을 지키고 있었다. 즉, 기존 state를 직접 변경 시키는 것이 아닌 새로운 객체를 만들어서 수정 후 반환해왔다.

RTK에는 immer.js라는 라이브러리를 내장하고 있다. 이는 우리가 state를 변경할 때 불변성을 지켜주지 않게 작성해도 가능하도록 해준다!

⚠️ 실제로 불변성을 지키지 않아도 된다는 뜻이 아니다. 우리가 불변성을 지키지 않아도, immer가 불변성을 대신 지켜준다.

추가

// 기존 
return [...state, action.payload];

// immer
return state.push(action.payload);

수정

// 기존
return state.map((item) => {
  if (item.id === action.payload) {
    return { ...item, isDone: !item.isDone };
  } else {
    return item;
  }
});

// immer 사용
const item = state[action.playload];
item.isDone = !item.isDone;
return state;

이처럼 많은 기능과 편의성들이 새로 추가되어 나온 것이 RTK다. 이 보다 더 많은 기능 들이 있지만 나중에 쓰게 되면서 다시 더 알아봐야겠다.

Redux Toolkit은 기존 Redux 보다 더 어려운 것이 아닌, 더 쉽게 쓰라고 나온 것이니 감사하게 잘 써봐야 겠다!