Redux Toolkit에 대하여...

1. Redux

https://minprogramming.tistory.com/entry/redux%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

redux에 대하여...

https://minprogramming.tistory.com/entry/MVVM%EA%B3%BC-FLUX%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

MVVM과 FLUX에 대하여...

2. Redux Toolkit

2-1) redux toolkit 도대체 뭐야?!

: redux toolkit은 redux를 편하게 사용할 수 있도록 만들어진 패키지다. 즉 기존의 redux와 동작 원리는 똑같지만 그 원리를 구현하는 방법에서 차이가 나고 redux toolkit이 더 간단하고 편하다.

2-1) redux toolkit 도대체 왜 쓰는 거야?

: 기존의 redux는 기능을 구현하는 데 있어서 굉장히 복잡했다. 좀 더 자세히 말하자면 리덕스의 경우 FLUX 패턴을 이용한다. 그래서 redux의 구성 요소가 action , action func, reducer, store가 있는 것이다. 이때 redux에서는 action,action func, reducer를 각각 따로 만들어야 했다. 이로 인해서 코드의 가독성과 유지보수이 2가지 측면에서 굉장히 비효율적이었다. 그리고 이때 혜성처럼 등장한 것이 redux toolkit이었다 .redux toolkit은 action, action func , reducer를 하나로 통합했다. 이로 인해서 코드의 간결성, 유지보수 측면에서 굉장히 크게 상승했고 이는 결과적으로 redux를 사용하는 사람들에게 선영향을 끼쳤다.

2-2)how?

: 기존의 redux의 모양은 다음과 같다.

// 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;

이때 addNumber , minusNumber는 액션 생성함수이며 ADD_NUMBER, MINUS_NUMBER는 액션이 된다. 그리고 counter함수가 리듀서가 된다. 이를 redux toolkit은 이렇게 바꿨다.

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

const initialState = {
  number: 0,
};

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;

위 구조를 보면 counterSlice안에 크게 3가지로 구조를 나눌 수 있다. name = reducer name , initialState = 초기 전역 상태 , reducers => reducer 로직, addNumber, minusNumber => 액션 생성 함수

이렇게 예시를 두고 보면 redux와 redux toolkit은 굉장히 큰 차이가 난다는 것을 확인할 수 있다. 하지만 위에 redux toolkit을 제대로 사용할려면 redux의 구조 즉 FLUX 패턴을 잘 알고 있어야 하며 실제로 구현도 잘 할 줄 알아야 한다.