diff --git a/src/pages/PostDetailsPage.jsx b/src/pages/PostDetailsPage.jsx
index 4e025f7..d5854e5 100644
--- a/src/pages/PostDetailsPage.jsx
+++ b/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 (
Go Back
-
{isLoading && }
{error && }
diff --git a/src/redux/postDetailReducer.js b/src/redux/postDetailReducer.js
index 4b9467d..4a0dbba 100644
--- a/src/redux/postDetailReducer.js
+++ b/src/redux/postDetailReducer.js
@@ -11,7 +11,7 @@ export const requestPostDetails = createAsyncThunk(
async (postId, thunkApi) => {
try {
// setIsLoading(true);
-
+ // робимо мережевий запит
const postData = await findPostById(postId);
// setPostDetails(postData);
return postData; // БУЛЕ ЗАПИСАНО В action.payload
@@ -19,6 +19,7 @@ export const requestPostDetails = createAsyncThunk(
// 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;