[리액트 심화] -팬레터 컬렉션 업그레이드

와, 기존의 과제에서 좀더 업그레이드 해서 로그인과 회원가입이랑 여러기능들을 추가하는게 나왔다. 와.. 너무어려워...
오전 9시 시작인데 벌써 지금 TIL을 쓰는 시점은 다음날 12시 반이 넘었다..

일단 중간에 너무 많은 레드스크린을 봐서인지 피로감이 엄청나다..ㅠ

제일먼저 한건 클론해서 기존 리덕스에서 리덕스 툴킷으로 변경했다

1. configStore.js

import { configureStore } from "@reduxjs/toolkit";
import authSlice from "redux/modules/authSlice";
import letterReducer from "redux/modules/letterReducer";
import selectMemberReducer from "redux/modules/selectMemberReducer";

const store = configureStore({
  reducer: {
    letter: letterReducer,
    selectMember: selectMemberReducer,
    auth: authSlice,
  },
});

export default store;

☞ 기존 코드보다 정말 간결해지고 configureStore를 쓴다.

2. LetterReducer

import { createSlice } from "@reduxjs/toolkit";
import uuid from "react-uuid";
import data from "../../data.json";

export const letterSlice = createSlice({
  name: "letter",
  initialState: {
    letters: data.map((aData) => ({
      ...aData,
      id: uuid(),
    })),
  },
  reducers: {
    addLetter: (state, action) => {
      const newLetter = action.payload;
      newLetter.id = uuid();

      return {
        ...state,
        letters: [...state.letters, newLetter],
      };
    },
    updateLetters: (state, action) => {
      const updatedLetters = action.payload;

      return {
        ...state,
        letters: updatedLetters,
      };
    },
  },
});

export const { addLetter, updateLetters } = letterSlice.actions;

export default letterSlice.reducer;

☞ 이것도 새롭게 CreateSlice로 만들어준다.

사용하는 방법은 그대로 useSelector와 useDispatch를 사용한다.

오늘 레파지토리를 얼마나 많이 만들었는지 모르겠다.
피로감도 어마어마한데, 너무 어려움 투성이다..ㅠㅠ..

아 진짜.. 과제가 막막하긴한데... 또 내겠지.. ^^...