React 관련 싹훑기(13) Redux toolkit 문서 읽기

https://redux-toolkit.js.org/introduction/getting-started

Getting Started | Redux Toolkit

이번에 Notion 프로젝트를 하면서 Redux를 통해서 상태관리를 "잘"하면 정말 원하는 정보를 웹에서 마음껏 띄울 수 있겠다는 생각이 들었다. 그러다 Redux toolkit을 알게 되어서 이부분을 좀더 공부를 해보려고 한다. 최종 목표는 Redux와 TypeScript의 이점을 모두 취하는 것인데, Redux toolkit과 TypeScript가 잘 붙는다는데 toolkit을 너무 몰라서 시작조차 하기 힘들어서 문서를 읽어보기로 했다. 

 

Redux Toolkit이란?

Getting Started 시작에서 "Redux 로직을 쓰기위한 표준 방법이 되기 위해서 고안된 것이다", 라고 되어있다. 똑똑한 사람들이 Redux만들어 놨더니, 사람들이 계속 이상하게 쓰니까 답답해서 제발 이렇게 쓰라고 만든 것 같아서, 감사하다는 마음을 가지고 얘를 봐야할것같다. 

 

Redux Toolkit은 아래 세가지 문제를 해결하기 위해서 고안되었다. (help address three common concerns about Redux)

• Redux Store설정이 넘 복잡한것
• Redux가 뭔가 쓸모있는 것을 하기 위해서 많은 패키지를 설치해야하는 문제
• Redux가 많은 보일러플레이트 코드를 필요로 하는 문제

 

Redux Toolkit QuickStart

https://www.youtube.com/watch?v=iBUJVy8phqw 

이 영상은 Toolkit QuickStart를 따라하는 내용이다. 

 

가장 핵심적으로 이해해야할것은 createSlice를 사용하는 방법이다. 

 

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

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0,
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
    incrementByAmount: (state, action) => {
      state.count += action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

원래 initialState 따로, Reducer따로, action creator 생성 따로, Action Type정의도 다 따로였는데 여기서 한방에 해결이다. 

 

사용방법을 강제 하는 느낌인데, 이걸 보고나니까 Redux를 이렇게 사용해야했구나, 하는 생각이 든다. 

 

state변화의 경우 내부적으로 Immer를 쓰고 있기때문에 그냥 mutate해도 알아서 처리가 된다. 

 

 

 

후기

아직 문서를 좀더 봐야하긴 하지만, Redux Toolkit을 좀더 자주 사용하고 TypeScript도 QuickStart에 되어있는대로 일단 도입을 해볼까 싶다. 

 

https://redux-toolkit.js.org/tutorials/typescript