RTK란?

Redux Tool Kit
기존 리덕스를 개량한 것
코드량은 적고 더 편리하다.

Redux와 RTK의 차이 비교

패키지 설치

yarn add @reduxjs/toolkit

count 모듈 비교

가장 큰 차이점은 action creator와 action value를 하나로 합친다는 점이다. 이로 인해 코드가 짧아지고 편리성도 상승한다.
또한 modules파일이 아닌 slices파일을 생성해 코드를 작성한다.

• src/redux/slices/counterSlices.js

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

//initialState는 기존과 같이 존재한다.
const initialState = {
  number: 0,
};

//createSlice를 통해 인자에 name, initialState, reducers를 넣어준다.
//reducer는 state와action을 인자로 같는다.
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를 store에 등록하기 위해 export한다.
export default counterSlice.reducer;

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

• src/redux/config/configStore.js
  - 가장 큰 차이점은 combineReducer와 createStore가 없다는 점이다. 두 개가 configureStore하나로 대체된 것 이다.

import { configureStore } from "@reduxjs/toolkit";
import counter from "../slices/counterSlice";
import todos from "../slices/todosSlice";

//configureStore는 인자로 객체를 받고 객체 안에서는 reducer를 받는다.
//이전에 createSlice인자로 받았던 Reducer의 name을 등록한다.
const store = configureStore({
  reducer: { counter: counter },
});

export default store;

• Provider를 주입하는 과정은 이전과 동일하다.

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

• App.jsx

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

const App = () => {
  // store에 있는 counter 모듈 state 조회
  const counter = useSelector((state) => state.counter);

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

export default App;

하루를 마치며

오늘은 개인과제 3일차다. 3일차가되고 오늘은 정신을 차리고 진행했다. 어제는 시작하는 부분에서 막혀 많은 작업을 하지 못했지만 오늘은 진행을 하게되서 다행이라고 생각한다. 힘들었던 기분도 느껴보는 것이 좋은 경험이 되어 앞으로 비슷한 기분이 들면 잘 해쳐나갈 수 있을 것이다. 남은 시간동안에는 집중해서 마무리 할 것이다.