Redux toolkit으로 Redux프로처럼 사용해보기

기존에 Redux코드를 리액트 앱에서 작성하다 보면 불만이 생기기 마련이다. 

왜냐하면 이렇게 까지 해야 할까 싶은 수많은 코드들 때문이다.

 

그래서 리덕스 측에서는 새로운 방안을 제시했는데, 그것이 바로 Redux Toolkit이다.

리덕스 코드를 정말 짧게 줄여줄 착한 라이브러리이다. 또한, 기능 또한 강력하기 때문에 한번 배워볼 가치가 있다.

 

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

리액트 앱에 NPM이라면 위의 명령어를, yarn이라면 밑의 명령어를 실행하여서 Toolkit을 다운로드하여 보도록 하자.

 

Toolkit에서 어떤 기능을 제공하는지 하나하나 살펴보도록 하자.

 

createAction

가장 먼저 createAction이라는 함수이다. 이 함수는 액션 생성 함수를 만들어주는 함수인데, 

기존에 increase라는 액션 생성함수를 만들려면 조금 긴 코드를 요구했다.

export const INCREAMENT = 'INCREAMENT' as const;

export const increase = () => ({
	type : INCREAMENT
});

 

그러나 createAction을 사용하게 되면,

export const increase = createAction("INCREAMENT");

이렇게 짧게 액션 생성함수를 생성해준다.

위의 코드와 밑의 코드를 console.log(increase()); 할 때 결과는 

{
	type : INCREAMENT,
}

 

이러한 결과가 나오게 된다. 즉, 이 함수(액션 생성함수)가 리턴하는 값이 순수한 객체라는 것이다.

 

여기서 increase()가 리턴하는 값의 type에 접근하고 싶을 때는 어떻게 해야 할까?

즉,

console.log(increase.type);
// return "INCREAMENT"

 

이렇게 작성하면 increase가 리턴하는 객체의 type에 접근할 수 있게 될 것이다.

 

이제 createAction을 배웠으니 리듀서를 감소화시켜보는 작업을 해보도록 하자.

 

export const increase = createAction("INCREAMENT");
export const decrease = createAction("DECREAMENT");

function counterReducer(state , action){
	switch(action.type){
    	case increase.type:
        	return state + 1;
        case decrease.type:
      		return state - 1;
        default:
        	return state;
    }
}

export default counterReducer;

 

하지만 여전히 toolkit을 사용하기 전의 작업이랑 코드의 양이 크게 차이 나지 않아 보입니다.

그래서 이번에 사용해볼 함수는 

 

createReducer

를 한번 살펴보도록 하자. 

하지만 그전에 https://javascript.info/object#computed-properties 이 링크를 한번 살펴보도록 하자.

 

createReducer의 인자 값으로는 두 개가 있는데 첫 번째는 initialState 두 번째는 builderCallback를 받는다.

무슨 말인지 한번 코드를 보면서 살펴보도록 하자.

 

const counterReducer = createRenderer(0, {
  [increase.type]: (state) => state + 1,
  [decrease.type]: (state) => state - 1,
});

 

이렇게 하니까 위랑 비교했을 때 정말 코드가 짧아진 모습을 볼 수 있다.

 

그다음, redux toolkit은 Ducks패턴도 지원하는데, Ducks패턴이라는 것은 

github.com/erikras/ducks-modular-redux

erikras/ducks-modular-redux

 

 위의 링크에서 말하는 것처럼 액션, 리듀서, 액션 타입을 한 파일 내에서 관리하는 패턴을 말하는 것이다.

그래서 redux-toolkit에서 Duck패턴을 사용하기 위해서는 

 

createSlice

라는 함수를 사용하는 것이다.

 

이제 createSlice라는 함수를 사용해서 실제 리액트 앱에 사용하는 예제를 한번 보도록 하자.

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
  },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
    incrementByAmount: (state, action) => {
      state.count += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

 

이렇게 Redux Toolkit을 이용해서 구현을 해 보았는데 기존에 노말 리덕스를 사용할 때 보다 훨씬 적은 코드로 

많은 기능을 구현할 수 있던 점에서 매력이 있는 것 같다. 

 

다음에는 API fetch를 하는 toolkit예제를 가져와 보도록 하겠다.