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;