기존의 낡은 redux를 최신 redux로 바꿔주자.

redux-toolkit 공식 문서대로 ㄱㄱ

Step 1. 기존의 hnm프로젝트/productReducer.js에서 import 하기

import { createSlice } from '@reduxjs/toolkit'

• createSlice는 객체이며 한마디로 Reducer 만드는 것을 도와준다!
• 🌟반드시 name,initialState,reducers 이 세가지가 들어있어야 한다!🌟

import { createSlice } from "@reduxjs/toolkit"; ////
let initialState = {
  productList: [],
  selectItem: null,
};

function productReducer(state = initialState, action) {
  let { type, payload } = action;
  switch (type) {
    case "GET_PRODUCT_SUCCESS":
      return { ...state, productList: payload.data };
    case "GET_PRODUCT_DETAIL_SUCCESS":
      return { ...state, selectItem: payload.data };
    default:
      return { ...state };
  }
}

export default productReducer;

⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️

(기존 코드 주석처리하고 새로ㄱㄱ)

import { createSlice } from "@reduxjs/toolkit";
let initialState = {
  productList: [],
  selectItem: null,
};

// function productReducer(state = initialState, action) {
//   let { type, payload } = action;
//   switch (type) {
//     case "GET_PRODUCT_SUCCESS":
//       return { ...state, productList: payload.data };
//     case "GET_PRODUCT_DETAIL_SUCCESS":
//       return { ...state, selectItem: payload.data };
//     default:
//       return { ...state };
//   }
// }

// export default productReducer;

createSlice({
  name: "product",
  initialState,
  reducers: {
    getAllProducts(state, action) { //return이랑 ...state 필요없음!
      state.productList= action.payload.data;
    },
  },
});

• return이랑 ...state 필요없음!
• state.productList ⇒ initialState부분에 있는 productList의 값을
• action.payload.data; ⇒ payload(action에서 옴)의 data로 바꿔줘

🤩기존 코드보다 코드가 훨씬 간결해진걸 확인할 수 있음