[리액트 심화] Redux Toolkit 사용하기 (리덕스와 다른점 비교)

1. 리덕스 툴킷이란?

- 리덕스를 개량한 것 => 리덕스의 구조와 패러다임은 동일 (새로운 개념 x)

- 차이 : 설정 부분 &  모듈 파일!

 

2. 리덕스 툴킷 설치 방법

(1) 터미널에 yarn으로 추가하기

 yarn add @reduxjs/toolkit

 

3. 코드 비교

(1) configStore.js 비교

[일반 리덕스]

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

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

▶ combineReducers + createStore 2가지를 사용했음

 

[리덕스 툴킷]

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

const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

▶ import는 slice.reducer에서 해온 것

▶ createStore대신에 configureStore 사용 (1개)

 

(2) todos.js 모듈 비교

[리덕스 툴킷]

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

const initialState = {
  todos: [],
};

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

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

▶ 기존에는 action creator / action item /  reducer를 export 해줬다면

리덕스 툴킷을 사용하면 Slice Api를 통해 한번에 가져옴.

▶ todosSlice.actions = action creator + action item

 

(3) index.jsx 비교

[일반 리덕스]

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

▶ provider로 저장된 store을 가져와서 사용했음

 

[리덕스 툴킷]

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

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

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

export default App;

 

 

4. Redux Devtools 사용 : 구글 확장프로그램 추가 후 사용

Redux DevTools

 

 

끝.