@Redux/toolkit #1

1차 프로젝트때 이미 리덕스 툴킷을 조금 적용시켰다.
2차 프로젝트때는 조금 더 심도있게 파고들기 위해서 리덕스 툴킷을 조금 더 공부해보자.

리덕스 툴킷이란?

리덕스를 사용하다보면 코드의 양이 계속 늘어나기 마련이고 그에따라 계속 복잡해져만 간다.
리덕스 툴킷을 적용하면 코드를 상당부분 줄일 수 있으며 또한 쉽게 사용 할 수 있다.
최근 리덕스 툴킷은 리덕스 로직 작성을 위해 redux 제작자들이 공식적으로 추천하는 방법이다.
단, 리덕스 툴킷을 공부하기 전 리덕스를 먼저 공부하고 나서 사용해보는것을 적극 권장한다.

설치

npm install @reduxjs/toolkit

CRA 설치시 아래와 같이 redux 템플릿을 사용 할 수 있다.

npx create-react-app my-app --template redux

주요 메서드 소개

configureStore

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './module/rootReducer';

const store = configureStore({ reducer: rootReducer });

리덕스에서 createStore를 사용했던것과 달리 toolkit에서는 configureStore를 사용한다.
default로 redux dev Tool을 제공해서 따로 라이브러리를 설치하거나, 미들웨어로 넣어 줄 필요가 없다.

createAction

import { createAction } from '@reduxjs/toolkit';

export const selectRowAction = createAction(MODE_SELECT_ROW, rowData => rowData);
const ChangeCategory = createAction('CHANGE_CATEGORY')
const CurrentMovie = createAction('CURRENT_MOVIE')
const ChangeMovieInfo = createAction('CHANGE_MOVIE_INFO')
const RatingLength = createAction('RATING_LENGTH')
const ChangeCommentWrite = createAction('CHANGE_COMMENT_WRITE')
const CommentValueChange = createAction('COMMENT_VALUE_CHANGE')

type만 넣어주면 알아서 Action Object를 생성해준다.
위에서 만든 액션생성함수를 호출할때 인자를 넣어준다면 payload 필드에 자동으로 들어가게 된다

const ChangeCategory = 'INCREMENT';

const increment = createAction(ChangeCategory);

let action = increment(); // return { type: 'INCREMENT' }
let action = increment(5); // return { type: 'INCREMENT', payload: 5 }

createReducer

기존에 reducer 사용시에는 switch문을 사용해서 action type을 구분해 로직을 수행했다.
redux/toolkit에서는 이렇게 사용하도록 바뀌었다.

import { createReducer } from '@reduxjs/toolkit';

const reducer = createReducer(initialState, {
  [ChangeCategory] : (state, action) => {
    state.category = action.payload
  },
  [ChangeMovieInfo] : (state, action) => {
    state.isMovieInfo = action.payload
  },
  [ChangeCommentWrite] : (state, action) => {
    
    state.isCommentWrite = action.payload
  },
  [CurrentMovie] : (state, action) => {
    state.currentMovie = action.payload
  },
  [CommentValueChange] : (state, action) => {
    state.commentValue = action.payload
  },
  [RatingLength] : (state, action) => {
    state.ratingLength = action.payload
  }
})

switch문이 사라졌고, 첫번째 인자인 initialState가 default이기에 switch문의 default 또한 필요없다.