Fanletter Develop

---

💡Fanletter 발전시키기

이전에 했던 과제인 Fanletter 를 발전시키는게 이번 과제다. 기존에 redux 로 관리하던걸 redux-toolkit 으로 교체하고 로그인 기능, 프로필 기능 등 을 추가해야한다. 먼저 redux-toolkit 으로 교체해보자.

---

🧵 Redux-toolkit

import { createSlice } from "@reduxjs/toolkit";
import fakeData from "fakeData.json";

const initialState = fakeData;

const letterSlice = createSlice({
  name: "letter",
  initialState,
  reducers: {
    addLetter: (state, action) => {
      const newLetter = action.payload;
      return [newLetter, ...state];
    },
    deleteLetter: (state, action) => {
      const letterId = action.payload;
      return state.filter((letter) => letter.id !== letterId);
    },
    editLetter: (state, action) => {
      const { id, editingText } = action.payload;
      return state.map((letter) => {
        if (letter.id === id) {
          return { ...letter, content: editingText };
        }
        return letter;
      });
    },
  },
});

export default letterSlice.reducer;
export const { addLetter, deleteLetter, editLetter } = letterSlice.actions;

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

const initialState = "카리나";

const memberSlice = createSlice({
  name: "member",
  initialState,
  reducers: {
    setMember: (state, action) => {
      const activeMember = action.payload;
      return activeMember;
    }
  }
})

export default memberSlice.reducer
export const {setMember} = memberSlice.actions

기존 redux 로 사용하던 letter 와 member 에는 action value, action creator, initial state, reducer 를 개별적으로 적어줘야 했지만 redux-toolkit 에 있는 createSlice 사용으로 합쳐서 작성을 하여 코드가 보다 간결해졌다.

import { configureStore } from "@reduxjs/toolkit";
import letters from "../modules/letterSlice";
import member from "../modules/memberSlice";

const store = configureStore({
  reducer: {
    letters,
    member,
  },
});

export default store;

그리고 configStore 에서도 이전에는 combineReducers 를 사용했는데 configureStore 를 사용했다.