리덕스 툴킷 (RTK)

리덕스를 더 편하게 쓰기 위한 기능들을 흠수해서 만든 것

리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 ducks 패턴의 요소들이 자동화 되었다.
Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌고, 공식문서에서 리덕스 튤킷을 사용하는 것을 강력히 추천하고 있다.

• 공식 문서 참고
  https://ko.redux.js.org/redux-toolkit/overview/

RTK 패키지 설치

yarn add @reduxjs/toolkit

기존 Redux 코드를 RTK로 리팩토링하기

Reducer

기존 코드에선 액션 타입 정의와 액션 생성 함수, 리듀서를 각각 만들어줬어야 했다.

// 1) Action value
const ADD_NUMBER = "counter/ADD_NUMBER";
const MINUS_NUMBER = "counter/MINUS_NUMBER";


// 2) Action creator : action value를 return 하는 함수
export const plusN = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
  };
};

export const minusN = (payload) => {
  return {
    type: MINUS_ONE,
    payload,
  };
};

// Initial State
const initialState = {
  number: 0,
};

// 3) 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;

Redux Toolkit을 사용할 경우

Action Value와 Action Creator를 직접 생성해주지 않아도 된다.
Slice라는 API를 통해 Action Value, Action Creator, Reducer를 모두 만들어줄 수 있다.

slice API
1. export action creator
2. export reducer
3. action value

• createSlice() - name, initialState, reducers를 필수로 작성해줘야 한다.
• createSlice() 리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서 동시에 액션 생성자가 되고, 함수의 이름을 따서 자동으로 Action Value를 만들어 진다.

// TODO
// RTK의 Slice API를 사용한 경우
import { createSlice } from "@reduxjs/toolkit";


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 default counterSlice.reducer; // reducers를 default로 export
export const { addNumber, minusNumber } = counterSlice.actions; // action creator export

configStore

// ASIS : 일반 리듀서
const rootReducer = combineReducers({
  counter,
  users,
  todos,
});
const store = createStore(rootReducer);%%  %%

• configureStore()
• reducer 안에 각 모듈의 slice.reducer를 추가한다.

// TODO: RTK
// configureStore 사용
// reducer 안에 각 모듈의 slice.reducer를 추가
const store = configureStore({
  reducer: {
    counter,
    todos,
    users,
  },
});

export default store;