🤓 What I Learned Today

리덕스 미들웨어 Redux-Thunk

*thunk : 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미

redux-thunk 라이브러리는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어이며, 액션 객체가 아닌 함수를 디스패치 할 수 있다.

리덕스 미들웨어가 그 함수를 전달받아 store의 dispatch 와 getState를 파라미터로 넣어 호출.

리덕스 Toolkit

리덕스를 쉽게 사용하기 위해 만들어짐🙂

🤔 Code Snippets

Reducer를 툴킷으로 만들보기…

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

옛날 리덕스 문법을 사용하게 되면 매번 if else 또는 switch 문을 번거롭게 사용해야하는 불상사가 생긴다. 오타나기도 쉽다.

여기서~!

쉽게쉽게 가자 하고 만들어진것이

createSlice 라는 리덕스 툴킷을 사용한다.

→Reducer을 만드는 것을 도와준다!

객체를 받는 데 반드시 3가지가 있어야 한다,

1. name : action 이름을 만드는데 name 이라는 키가 쓰임
2. initialState : reducer 에서 사용될 state 값을 정의해주면 됨
3. reducers : 객체타입, ifelse, switch 써서 만든 케이스들을 다 함수로 만듬

이렇게 바꿔주면 되는 것!

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

let iniialState = {
  productList: [],
  selectedItem: null,
};

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

const productSlice = createSlice({
  name: "product",
  iniialState, //위에서 정의해준 초기값
  reducers: {
    getAllProducts(state, action) {
      // return {...state, productList payload.data}
      // 귀찮으니 리덕스 툴킷에서 생략 해버리자.
      state.productList = action.payload.data;
    },
    //기능 추가하고 싶다면 이곳에 함수 만들어주기
    getSingleProduct(state, action) {
      state.productList = action.payload.data;
    },
  },
});

console.log(producSlice);

//궁극적으로 전달해야 하는 것은 reducer ⭐️
export default productSlice.reducer;

이제 Action dispatch 를 어떻게 해야 할까~?

export const productActios = productSlice.actions

payload 값은 어떻게 넘기지~?

매개변수로 전달된 값은 알아서 ~ payload 라는 필드 아래로 들어감!

🚀 Challenges Experienced

산 넘으면 산...리액트 넘으면 리덕스 리덕스 넘으면 미들웨어...툴킷....그치만 이 많은 산들을 넘다 말다 하는 느낌이다..어디서부터 잘 못 되었을까😧

개념을 알듯말듯 하다.정리해놔도 다시 활용하려면 기억이 안나고 나는 인간이 아닌 금붕어아닐까 왜이렇게 기억을 못하지...언제쯤 웃으면서 개발일지 마무리가 오늘도 자알~배웠다..로 마무리 되는 희망찬(?) 일지가 되는 날이 올까...