[TIL - Redux Toolkit]

이전에 배운 리덕스를 개량한 것

새로운 것이 아닌, 리덕스와 구조나 패러다임이 모두 똑같은 것이라고 할 수 있다.

전체 코드 양을 줄이기 위해 새로운 API가 추가되었고 일일히 손으로 만들어야하는 ducks 패턴 요소들이 어느정도 자동화가 되었다.

yarn add react-redux @reduxjs/toolkit

configStore.js

// import { createStore } from "redux";
// import { combineReducers } from "redux";
import counter from "../modules/counter";
import { configureStore } from "@reduxjs/toolkit";

//ASIS : 일반 reducer

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

// const store = createStore(rootReducer);

// TODO: Redux toolkit
const store = configureStore({
  reducer: {
    counter: counter,
  },
});

export default store;

slice 사용

// 일반 리덕스 예시 코드

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

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

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 default counter;

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

• 불변성을 유지하기 위해 .push 등을 유의하면서 사용해야했지만 redux toolkit에는 immer라는 기능이 내장되어있다.
• devtools 기능도 내장.
• 툴킷이 아닌 일반 리덕스에서 devtools를 사용하고자 한다면 별도 설정이 필요하지만, 툴킷은 devtools이 내장되어 있기 때문에 별도의 코드 설정 없이 바로 사용 가능.

devtools

• 리덕스를 사용하면 redux devtools를 사용할 수 있다.
• 강력한 개발툴이며, 현재 프로젝트의 state 상태나 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있다.
• 구글 웹스토어에서 플러그인 설치

Flux 패턴

https://bestalign.github.io/translation/cartoon-guide-to-flux/
https://taegon.kim/archives/5288