Redux Toolkit

1. 리덕스 툴킷이란?

 

리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로 생각하면 된다.

코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스 툴킷이다.

 

리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다.

즉, 새로운 것이 아니다. 리덕스 전체 코드의 양을 줄이기 위해 새로운 API가 추가 되었고,

직접 만들어 주어야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었다.

 

컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같다.

바뀐 부분은 그저 모듈 파일일 뿐이다.

 

2.일반 리덕스와 비교

 

툴킷 설치하기

 

yarn add react-redux @reduxjs/toolkit

 

지난번 만들었던 counter 모듈과의 비교

 

리덕스로 만든 counter 모듈은 이미 지난번에 포스팅하였으니 생략하고,

툴킷 사용시 어떤식으로 짧아지는 것인지를 확인해보도록 하자.

 

// src/redux/modules/counterSlice.js

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

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter", // 이 모듈의 이름
  initialState, // 이 모듈의 초기상태 값
  reducers: { // 이 모듈의 Reducer 로직
   // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
    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;

 

(1) Slice

큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고,

Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점이다.

 

Slice라는 API를 사용한 것을 볼 수 있는데 이 API를 사용하면 저 3개를 각각 만들어줄 필요 없이 

한번에 3개가 모두 만들어진다.

그 안에 우리가 필수로 작성해줘야 하는 값은 name,initialState,reducers가 있다.

 

counterSlice 리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서도 동시에 Action Creator가 

된다는 것을 기억하자.

그리고 Action Value까지 함수의 이름을 따서 자동으로 만들어준다.

 

(2) export 방식의 변화

툴킷을 사용하지 않았을 때는 액션 크리에이터 각각 생성과 동시에  export를 붙여줬어야 했던 것을,

툴킷 사용시에는 아래와 같이 작성하면 된다.

 

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

리듀서에 로직을 추가할 때마다 함수를 추가해서 내보내주면 된다.

 

configStore 비교

 

일반 리덕스

// 일반 리덕스 combineReducers 예시 코드

import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter,
});
const store = createStore(rootReducer);
export default store;

 

리덕스 툴킷

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";
/**
 * import 해온 것은 slice.reducer 입니다.
 */
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우
 * 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 합니다.
 *
 * 아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
 * 이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것 입니다.
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

 

configStore에서는 크게 달라지는 점은 없다.

다만, 리덕스 툴킷 configStore에서는 모듈을 추가해서 여러개의 모듈을 store에 등록해 보았다.

 

index.js

 

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

그리고 이렇게 생성한 store를 export default 해서 최상위의 index.js Provider에 주입해 주는 것은 

전혀 바뀐게 없다.

 

App.js

 

// src/App.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  // Store에 있는 todos 모듈 state 조회하기
  const todos = useSelector((state) => state.todos);

  // Store에 있는 counter 모듈 state 조회하기
  const counter = useSelector((state) => state.counter);

  return <div>App</div>;
};

export default App;

App.js에서 툴킷을 사용해 만든 모듈을 조회해보자.

이전과 방식은 완전히 동일하다.

 

3. Redux DevTools 사용하기

 

devtools 소개 

 

리덕스를 사용하면, 리덕스 devtools를 사용할 수 있다.

 

다른 패키지에서는 찾아볼 수 없는 굉장히 강력한 개발툴이다.

현재 프로젝트의 state 상태와, 어떤 액션이 일어났을 때 그 액션이 무엇이고,

그것으로 인해 state가 어떻게 변경되었는지 등을 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있다.

 

이 devtools 때문에 리덕스를 사용한다고 해도 과언이 아니다.

 

사용하기 위해서는 구글 웹스토어에서 플러그인을 설치해야 한다.

Redux Devtools설치 :

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

 

사용하는 법

 

플러그인을 설치하고 리액트 프로젝트에서 리덕스를 사용하고 있으면 플러그인이 실행된다.

 

실행 안될때는 회색글씨

 

저걸 클릭해서 확인해볼 수도 있고, 개발자도구에서 Redux라는 메뉴가 생겼을텐데,

거기로 들어가서 확인해 볼 수도 있다.

 

여기서 state의 상태라던가

state가 어떻게 변경되는지,

액션이 일어났을 때 그 액션이 무엇인지 등을 

확인할 수 있는것이다.

 

앞으로 애용하도록 해야겠다.

 

단,툴킷이 아닌 일반 리덕스에서는 별도의 설정이

필요하다는 점에 주의하자.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정리

• slice를 이용하면, Reducer, Action Value, Action Creator를 한번에 구현할 수 있다.
• 툴킷을 사용하면, 별도의 설정없이 devtools를 사용할 수 있다.
  • 내장된 주요 패키지 : thunk, devtools, immer 등.
• 우리는 앞으로 툴킷 을 메인으로 사용할 것이다.