React / 리덕스 일반 리덕스 vs 리덕스 툴 킷(RTK) 비교 및 사용 방법 정리

/*
    일반 리덕스 VS 리덕스 툴킷
 
     1. store 생성
    
    일반 리덕스 : createStore + 미들웨어 설정 필요
 
    Redux Toolkit : configureStore 하나로 모든 설정 알아서 해줌
 
    2. action/reducer 작성
    
    일반 리덕스 : action 타입 상수, action creator 함수 + reducer 따로 작성 필요
    
    Redux Toolkit :  createSlice로 한 번에 작성
                    (개발 하고자 하는 기능 단위로 slice 설정 가능 및 store에서 한번에 통합 가능)    
 
    3. 불변성 처리
 
    일반 리덕스 : 직접 spread(...) 써서 불변성 유지 필요(기존 값 수동으로 계속 유지 해야 함)
 
    Redux Toolkit : Immer 라이브러리 사용해서 내부에서 알아서 불변성 유지해줌
 
    4. 코드 양
    
    일반 리덕스 : 뒤지게 많음, 연결 하는 것도 다 수동... 흐름 따라가기 어려움 액션 생성 함수 -> 리듀서 연결 부분
    
    Redux Toolkit : 많은 부분을 리덕스 내부에서 동작하게 만들어줘서 보다 쉽게 리덕스를 사용할 수 있다.
 
    
*/
 
// 일반 리덕스 사용법 (카운터 예제 사용)
 
// 1. 일반 리덕스 설치
 
npm install redux react-redux
 
// 2. 액션 타입 정의
// src/redux/counterActionTypes.js
 
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const RESET = "RESET";
 
// 3. 액션 생성 함수 정의 , 리모콘 버튼 역할 
// src/redux/counterActions.js
 
import {INCREMENT, DECREMENT, RESET} from "./counterActionTypes";
 
export const increment = () => ({type : INCREMENT});
export const decrement = () => ({type : DECREMENT});
export const reset = () => ({type : RESET});
 
// 4. 리듀서 정의
// src/redux/counterReducer.js
 
import { INCREMENT, DECREMENT, RESET } from "./counterActionTypes";
 
const initialState = {value : 0};
 
export default function counterReducer(state = initialState, action) {
    switch (action.type) {
        case INCREMENT :
             return { ...state, value: state.value + 1 }; // 불변성 유지 위해 spread
        case DECREMENT:
              return { ...state, value: state.value - 1 };
        case RESET:
              return { ...state, value: 0 };
            default:
          return state;
          }
    }
 
// 5. 스토어 생성
// src/redux/store.js
 
import { createStore, combineReducers } from "redux";
import counterReducer from "./counterReducer";
 
const rootReducer = combineReducers({ // 여러개의 리듀서 합치기 툴킷의 slice 합치는 것과 유사
    counter: counterReducer,
});
 
export const store = createStore(
    rootReducer,    
);
 
 
// 6. Provider 연결 (index.js에 store 연결)
 
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import App from "./App";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
 
 
// 7. Counter 컴포넌트
 
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./redux/counterActions";
 
function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
 
  return (
    <div>
      <h2>카운트: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(reset())}>리셋</button>
    </div>
  );
}
 
export default Counter;
 
 
 
 
 
 
 
// Redux Tool kit 사용법 (카운터 예제 사용)
 
// 1. 리덕스 툴킷 설치
 
npm install @reduxjs/toolkit react-redux
 
// 2. slice 만들기
// counterSlice.js
 
import { createSlice } from "@reduxjs/toolkit";
 
// 초기 상태
const initialState = {
  value: 0,
};
 
// slice 생성
const counterSlice = createSlice({
  name: "counter", // slice 이름
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    reset: (state) => {
      state.value = 0;
    },
  },
});
 
// 액션과 리듀서 export
export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;
 
// 3. store 만들기
// store.js
 
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
 
export const store = configureStore({
  reducer: {
    counter: counterReducer, // 스토어에 slice 모두 등록!!!
  },
});
 
// 4. Provider 설정 (일반 리덕스랑 설정 같음, index.js에 store 등록)
 
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
 
// 5. Counter 컴포넌트 제작
 
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./counterSlice";
 
function Counter() {
  const count = useSelector((state) => state.counter.value); // 상태 읽기
  const dispatch = useDispatch(); // 액션 보내기
 
  return (
    <div>
      <h2>카운트: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(reset())}>리셋</button>
    </div>
  );
}
 
export default Counter;
 
// 6. App.js에서 최종 사용
 
import React from "react";
import Counter from "./Counter";
 
function App() {
  return (
    <div>
      <h1>리덕스 툴킷 카운터 예제</h1>
      <Counter />
    </div>
  );
}
 
export default App;
 
 
// 현업에서도 Slice 별로 개발 진행할 수 있어서 Redux 툴 킷 쓸 것 같다.
 
// 기능별로 개발하는게 나누기도 좋고, 통합도 스토어에서 한번에 할 수 있으니까..... ㅎㅎ