final one task in create Thunk

src/pages/PostDetailsPage.jsx

@@ -7,19 +7,12 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
-// import PostCommentsPage from './PostCommentsPage';
+
 import Loader from 'components/Loader';
 import ErrorMessage from 'components/ErrorMessage';
 
-import { findPostById } from 'services/api';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  addPost,
-  requestPostDetails,
-  setError,
-  setIsLoading,
-  setPostDetails,
-} from 'redux/postDetailReducer';
+import { requestPostDetails } from 'redux/postDetailReducer';
 
 const PostCommentsPage = lazy(() => import('pages/PostCommentsPage'));
 
@@ -28,6 +21,7 @@ const PostDetailsPage = () => {
   const location = useLocation();
   const backLinkHref = useRef(location.state?.from ?? '/');
 
+  // пілписка на дані зі стору
   const postDetails = useSelector(state => state.postDetails.postDetailsData);
   const isLoading = useSelector(state => state.postDetails.isLoading);
   const error = useSelector(state => state.postDetails.error);
@@ -46,9 +40,6 @@ const PostDetailsPage = () => {
   return (
     <div>
       <Link to={backLinkHref.current}>Go Back</Link>
-      <button onClick={() => dispatch(addPost({ title: '123', body: '123' }))}>
-        Click to add post to STATE
-      </button>
 
       {isLoading && <Loader />}
       {error && <ErrorMessage message={error} />}

src/redux/postDetailReducer.js

@@ -11,14 +11,15 @@ export const requestPostDetails = createAsyncThunk(
   async (postId, thunkApi) => {
     try {
       // setIsLoading(true);
-
+      // робимо мережевий запит
       const postData = await findPostById(postId);
       // setPostDetails(postData);
       return postData; // БУЛЕ ЗАПИСАНО В action.payload
     } catch (error) {
       // setError(error.message);
       // після неуспішного запиту ми повернемо thunkApi та викличемо спецільний метод rejectWithValue і передамо об'єкт помилки
       return thunkApi.rejectWithValue(error.message);
+      // rejected - виникне тільки коли ми руками переведемо проміс
     }
   }
 );
@@ -39,42 +40,28 @@ const postDetailsSlice = createSlice({
   // Початковий стан редюсера слайсу
   initialState: INITIAL_STATE,
   // Об'єкт редюсерів
-  reducers: {
-    setIsLoading(state, action) {
-      state.isLoading = action.payload;
-    },
-    setPostDetails(state, action) {
-      state.postDetailsData = action.payload;
-    },
-    setError(state, action) {
-      state.error = action.payload;
-    },
-    addPost(state, action) {
-      // state.posts.push(action.payload);
-      state.posts = [...state.posts, action.payload];
-    },
-    deletePost(state, action) {
-      state.posts = state.posts.filter(post => post.id !== action.payload);
-      // const deletedPostIndex = state.posts.findIndex(post => post.id === action.payload);
-      // state.posts.splice(deletedPostIndex, 1);
-    },
-  },
+  // !========================REDUX BLL======================
   // thunk повертає спеціальні ред'юсери які отримують builder.addCase(назва thunk)
   extraReducers: builder =>
     builder
+      // PENDING - стан очікування запиту
       .addCase(requestPostDetails.pending, (state, action) => {
         state.isLoading = true;
         state.error = null;
       })
+      // FULFILED - запит пройшов успішно, та повернув дані
       .addCase(requestPostDetails.fulfilled, (state, action) => {
         state.isLoading = false;
         // в Reducer дані потрапляють тільки через один спосіб action.payload
         state.postDetailsData = action.payload;
+      })
+      // REJECTED - виникла помилка під час запиту
+      .addCase(requestPostDetails.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload;
       }),
+  // !======================End/ REDUX BLL====================
 });
 
-// Генератори екшенів
-export const { setIsLoading, setPostDetails, setError, addPost, deletePost } =
-  postDetailsSlice.actions;
 // Редюсер слайсу
 export const postDetailsReducer = postDetailsSlice.reducer;