20231129 TIL 개인과제 시작! redux toolkit thunk 변환

목표

• 강의 다 듣기

새로 알게 된것/ 오늘의 코드

기존의  순수 리덕스로 되어있던 팬레터를 thunk로 바꾸는 중이다. 

 

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

export const __addLetter = createAsyncThunk(
  "ADD_LETTER",
  async (payload, thunkAPI) => {
    try {
      const response = await axios.post(
        "http://localhost:4000/letters",
        payload,
      );

      //Promise-> resolve(네크워크 요청이 성공한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      //Promise-> resolve(네크워크 요청이 실패한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const __deleteLetter = createAsyncThunk(
  "DELETE_LETTER",
  async (payload, thunkAPI) => {
    try {
      const response = await axios.delete(
        `http://localhost:4000/letters/${payload}`,
      );

      //Promise-> resolve(네크워크 요청이 성공한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      //Promise-> resolve(네크워크 요청이 실패한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const __editLetter = createAsyncThunk(
  "EDIT_LETTER",
  async (payload, thunkAPI) => {
    try {
      const response = await axios.patch(
        `http://localhost:4000/letters/${payload.id}`,
      );

      //Promise-> resolve(네크워크 요청이 성공한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      //Promise-> resolve(네크워크 요청이 실패한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.rejectWithValue(error);
    }
  },
);

const initialState = {
  letters: [],
  isLoading: false,
  isError: false,
  error: null,
};
export const __getLetters = createAsyncThunk(
  "getLetters",
  async (payload, thunkAPI) => {
    try {
      const response = await axios.get("http://localhost:4000/letters");

      //Promise-> resolve(네크워크 요청이 성공한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      //Promise-> resolve(네크워크 요청이 실패한 경우)-> dispatch해주는 기능을 가진 API
      return thunkAPI.rejectWithValue(error);
    }
  },
);
export const fanletter = createSlice({
  name: "letters",
  initialState,
  reducers: {},
  extraReducers: {
    [__getLetters.pending]: (state, action) => {
      state.isLoading = true;
      state.isError = false;
    },
    [__getLetters.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.isError = false;
      state.letters = action.payload;
    },
    [__getLetters.rejected]: (state, action) => {
      state.isLoading = false;
      state.isError = true;
    },
    [__addLetter]: (state, action) => {
      state.letters.push(action.payload);
    },
    [__deleteLetter]: (state, action) => {
      state.letters = state.letters.filter(
        (item) => item.id !== action.payload,
      );
    },
    [__editLetter]: (state, action) => {
      state.letters = state.letters.map((item) => {
        if (item.id === action.payload.id) {
          return action.payload;
        }
        return item;
      });
    },
  },
});

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

수정이 제대로 되지 않는다. 

그리고 화면에 바로 적용되지 않는다.  조금 더 연구를 해봐야겠다.

 

 

 

 

 

 

 

 

 

 

 

개념정리

2023.11.29 - [React] - axios interceptor

axios interceptor

2023.11.29 - [React] - json server

json server

목표 달성여부

 

내일 목표

• 로그인 들어가기