[Redux] 리덕스 툴킷(Redux-Toolkit)

괴발·2022년 8월 6일

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

순서
1. 리덕스 툴킷(Redux-Toolkit) 이란 🌱
2. 리덕스와 툴킷 코드 비교 🌱
3. configStore 비교 🌱
4. App.js에서 툴킷을 이용해도 모듈을 조회할 수 있다. 🌱

1. 리덕스 툴킷(Redux-Toolkit) 이란 🌱

리덕스 사용을 위해 작성한 duck패턴 요소가 전체적인 코드량을 늘린다는 불만이 발생하였고 리덕스팀이 이를 수용하여 코드는 적게, 하지만 더 사용하기 편하게 만든 것이 리덕스 툴킷(Redux-Toolkit)이다.

리덕스 툴킷은 기존 리덕스와 구조, 패러다임 모두 동일하다.
전체적인 코드량을 줄이기 위해 새로운 API가 추가되었고 손으로 하나하나 작성해야했던 ducks패턴 요소를 약간이나마 자동화하였다. 또 컴포넌트에서 useSelector를 이용하는 것도 동일하다. 바뀐 것은 모듈파일뿐이다.

2. 리덕스와 툴킷 코드 비교 🌱

프로그램 모듈 작성시 리덕스는 action value, action creator, initial state, reducer를 모두 적어주어야 한다.

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

// export default reducer
export default counter;

🙌

다음은 리덕스 툴킷을 이용해 사용한 코드다. 내용을 보면
action value, action creator, reducer 가 하나로 합쳐진 것을 확인 할 수 있다.

Slice 라는 API를 사용하면 action value, action creator, reducer 를 각각 만들 필요 없이 한번에 만들 수 있다.

// src/redux/modules/counterSlice.js

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

const initialState = {
  number: 0,
};

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 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

🙌

여기서 슬라이스만 보면

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;
    },
  },
});

🙌

리듀서 내부 함수는 리듀서의 로직이자, action creator가 된다.
action value 도 함수이름을 따서 자동으로 생성된다.
즉, 우리는 reducer만 만들면 된다.

createSlice 안에 인자로 다음 세가지는 필수로 작성해야 한다.

name: "counter"
initialState
reducers: {}

3. configStore 비교 🌱

🎃 리덕스

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

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

🤖 리덕스 툴킷

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를 불러 reducer를 등록할 때 함께 등록하면 된다.

todos 모듈코드 🌱

// src/redux/modules/todosSlice.js

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

const initialState = {
  todos: [],
};

export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {},
});

export const {} = todosSlice.actions;
export default todosSlice.reducer;

4. 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;