const deletedLetter = () => {
dispatch(
showModal({
message: "정말로 삭제하시겠습니까?",
showCancelButton: true,
onConfirm: async () => {
dispatch(hideModal());
navigate(`/`);
dispatch(__deleteDatas(id));
dispatch(deleteLetter(id));
},
})
);삭제로직에 문제가 있는것같다. pending, fulfilled, rejected 그리고 그냥 리듀서 디스패치, navigate 순서가 막 뒤엉켜서 오류가나는것같다....
손 못대겠음..ㅋ
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { dataInstance } from "../../axios/api";
const initialState = {
isLoading: false,
posts: [],
error: null,
isError: false,
};
export const __getDatas = createAsyncThunk(
"__getDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.get("/posts");
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
export const __postDatas = createAsyncThunk(
"__postDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.post("/posts", payload);
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
export const __deleteDatas = createAsyncThunk(
"__deleteDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.delete(`/posts/${payload}`);
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
export const __editDatas = createAsyncThunk(
"__editDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.patch(`/posts/${payload.id}`, {
content: payload.content,
});
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
const dataSlice = createSlice({
name: "data",
initialState: initialState,
reducers: {
addLetter: (state, action) => {
return { ...state, posts: [...state.posts, action.payload] };
//state.push(action.payload); redux toolkit에 immer라는게 있어서 불변성유지가 자동으로 됌
},
deleteLetter: (state, action) => {
return {
...state,
posts: state.posts.filter((letter) => letter.id !== action.payload),
};
},
modifyLetter: (state, action) => {
const { id, editedContent } = action.payload;
return {
...state,
posts: state.posts.map((letter) =>
letter.id === id ? { ...letter, content: editedContent } : letter
), // 수정된 post만 업데이트
};
},
},
//다른함수들도 하는게좋겠지...
extraReducers: {
[__getDatas.fulfilled]: (state, action) => {
state.isLoading = false;
state.isError = false;
state.posts = action.payload;
},
[__getDatas.pending]: (state, action) => {
state.isLoading = true;
state.isError = false;
},
[__getDatas.rejected]: (state, action) => {
state.isLoading = false;
state.isError = true;
state.error = action.payload;
},
[__deleteDatas.fulfilled]: (state, action) => {
state.isLoading = false;
state.isError = false;
state.posts = action.payload;
},
[__deleteDatas.pending]: (state, action) => {
state.isLoading = true;
state.isError = false;
},
[__deleteDatas.rejected]: (state, action) => {
state.isLoading = false;
state.isError = true;
state.error = action.payload;
},
},
});
export default dataSlice.reducer;
export const { addLetter, deleteLetter, modifyLetter } = dataSlice.actions;
이렇게하면 절대안되더라
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { dataInstance } from "../../axios/api";
const initialState = {
isLoading: false,
posts: [],
error: null,
isError: false,
};
export const __getDatas = createAsyncThunk(
"__getDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.get("/posts");
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
export const __postDatas = createAsyncThunk(
"__postDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.post("/posts", payload);
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
export const __deleteDatas = createAsyncThunk(
"__deleteDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.delete(`/posts/${payload}`);
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
export const __editDatas = createAsyncThunk(
"__editDatas",
async (payload, thunkAPI) => {
//서버통신
try {
const response = await dataInstance.patch(`/posts/${payload.id}`, {
content: payload.content,
});
console.log(response.data);
//네트워크 요청성공시 디스패치해주는 기능
return response.data;
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error);
}
}
);
const dataSlice = createSlice({
name: "data",
initialState: initialState,
reducers: {
addLetter: (state, action) => {
return { ...state, posts: [...state.posts, action.payload] };
//state.push(action.payload); redux toolkit에 immer라는게 있어서 불변성유지가 자동으로 됌
},
deleteLetter: (state, action) => {
return {
...state,
posts: state.posts.filter((letter) => letter.id !== action.payload),
};
},
modifyLetter: (state, action) => {
const { id, editedContent } = action.payload;
return {
...state,
posts: state.posts.map((letter) =>
letter.id === id ? { ...letter, content: editedContent } : letter
), // 수정된 post만 업데이트
};
},
},
//다른함수들도 하는게좋겠지...
extraReducers: {
[__getDatas.fulfilled]: (state, action) => {
state.isLoading = false;
state.isError = false;
state.posts = action.payload;
},
[__getDatas.pending]: (state, action) => {
state.isLoading = true;
state.isError = false;
},
[__getDatas.rejected]: (state, action) => {
state.isLoading = false;
state.isError = true;
state.error = action.payload;
},
},
});
export default dataSlice.reducer;
export const { addLetter, deleteLetter, modifyLetter } = dataSlice.actions;
순서때매그런것같아서 delete할때도 좀 나눠서 해보려니 바로 빨간화면.. 차라리 없는게 나은듯
아자아자