Hello Everyone,
I’m working on the Redux News Reader, and my code isn’t working quite properly. For one thing it says loading comment in the sample browser, top of the page even when I have not clicked an article, and it doesn’t show the comments related to any of the articles when one is clicked.
I suspect I made an error either on step 7(3) and/or on step 8(2)
Here’s a link to the project: Redux News reader
I’ve only edited commentsSlice.js and comments.js so far.
My code is as follows:
commentsSlice.js:
// Import createAsyncThunk and createSlice here.
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
// Create loadCommentsForArticleId here.
export const loadCommentsForArticleId = createAsyncThunk(
'comments/loadCommentsForArticleId',
async (articleId) => {
const response = await fetch(`api/articles/${articledId}/comments`);
const json = await response.json();
return json;
}
)
// Create postCommentForArticleId here.
export const commentsSlice = createSlice({
name: 'comments',
initialState: {
// Add initial state properties here.
byArticleId: {
},
isLoadingComments: false,
failedToLoadComments: false,
},
// Add extraReducers here.
extraReducers: {
[loadCommentsForArticleId.pending]: (state, action) => {
state.isLoadingComments = true;
state.failedtoLoadComments = false;
},
[loadCommentsForArticleId.fulfilled]: (state, action) => {
state.byArticleId = action.payload.articleId;
state.isLoadingComments = false;
state.failedtoLoadComments = false;
},
[loadCommentsForArticleId.rejected]: (state, action) => {
state.isLoadingComments = false;
state.failedtoLoadComments = true;
}
}
});
export const selectComments = (state) => state.comments.byArticleId;
export const isLoadingComments = (state) => state.comments.isLoadingComments;
export const createCommentIsPending = (state) => state.comments.createCommentIsPending;
export default commentsSlice.reducer;
and comments.js:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
loadCommentsForArticleId,
selectComments,
isLoadingComments,
createCommentIsPending
} from '../comments/commentsSlice';
import { selectCurrentArticle } from '../currentArticle/currentArticleSlice';
import CommentList from '../../components/CommentList';
import CommentForm from '../../components/CommentForm';
const Comments = () => {
const dispatch = useDispatch();
const article = useSelector(selectCurrentArticle);
// Declare additional selected data here.
const comments = selectComments;
const commentsAreLoading = isLoadingComments;
// Dispatch loadCommentsForArticleId with useEffect here.
useEffect(() => {
if (article !== undefined) {
dispatch(loadCommentsForArticleId(article.id));
}
}, [dispatch, article]);
const commentsForArticleId = article === undefined ? [] : comments[article.id]
if (commentsAreLoading) return <div>Loading Comments</div>;
if (!article) return null;
return (
<div className='comments-container'>
<h3 className='comments-title'>Comments</h3>
<CommentList comments={commentsForArticleId} />
<CommentForm articleId={article.id} />
</div>
);
};
export default Comments;
Thanks for your help in advance
) but have managed to complete it - let me know if you’re still having challenges!