📆 22.10.13 - Redux Toolkit ?

이전에 redux... 정~~말 불편했다 개인적으로...
그런데 다행히도 redux의 좀 더 사용하기 편한? 버전인 redux toolkit을 항해 주특기 마지막 주차에서야 접할 기회가 생겨 정리해 보려고 한다.

Redux toolkit?

일단 Redux Toolkit은 Redux의 개량 버전이라고 생각한다.
기존의 리덕스는 원래 사용되었던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 하나 둘 들리기 시작했고, 이를 인지한 redux 개발진들은 코드를 더 적게 그리고 리덕스를 더 편하게 만들기 위해 변화를 도입을 하였다.

그렇다고 기존의 redux 와 아예 달라지진 않았다. 바뀐 부분을 한번 이야기 해보자!

redux toolkit install

npm install react-redux @reduxjs/toolkit

위의 코드로 reduxjs/toolkit 버전으로 설치하면 된다.

달라진 점을 코드로 확인해보자! (ex. count 프로그램)

// redux (toolkit x) 

// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload,
  };
};

// Initial State
const initialState = {
  number: 0,
};

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    // [퀴즈 답]
    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

// export default reducer
export default counter;

vs

// redux toolkit

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

const initialState = {
  number: 0,
};

// 하단의 reducers 부분에서 만들어진 함수 자체가 리듀서의 logic이 된다. = action
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

기존에 redux에서 다룬 요소인 Action Value, Action Creator, Reducer 부분을 따로따로 구분지어 정해진 코드 규칙 등을 넣어줬다면, toolkit 은 하나로 합쳐졌다 라는 부분이 가장 큰 변경점이자 장점이라고 생각한다.

장황하게 나열되는 것보단, 같은 기능이지만 가독성을 올리기 위해 간결하게 쓰이는 부분이 더 좋지 않나..
( 개발자라는 직업을 목표로 하다 보니 뭔가 추후에 내가 쓴 코드가 지저분하거나 너무 길어 확인하기 어려우면 좀 많이 불편해지는 것 같다. )

그리고 일반 리덕스에서 했던 것 처럼 export를 통해서 내보내고 사용해야되는 컴포넌트에서 import하면 사용이 가능해진다! 하단이 그 예이다

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

그런데 이전에 vuex 를 썼던 나에게는 아직도 이 양방향 데이터 전송의 맛을 못잊어 살짝 불편한 점이 있다. 좀 더 여러 라이브러리를 한번 써보면 내게 맞는 전역 상태관리 라이브러리를 찾을 수 있지 않나 싶다!

이 부분은 항해99 의 reference를 참고하여 스스로 기억하기 위해 작성하였습니다.