Hello everyone, I am currently having problems with the redux news reader project. Here is the link: redux news reader
I am currently on step 9 of the project. It asks to implement the useEffect function. I implement the function, but now when I click an article, the entire page disappears. Here is my code for that part written in Comments.js:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
loadCommentsForArticleId,
selectComments,
isLoadingComments,
} 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 = useSelector(selectComments);
const commentsAreLoading = useSelector(isLoadingComments);
const commentsForArticleId = article ? comments[article.id]: [];
// Dispatch loadCommentsForArticleId with useEffect here.
useEffect( () => {
if(article)
dispatch(loadCommentsForArticleId(article.id));
},[article,dispatch]
)
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;
I also receive this error from the console:
It seems that my error is coming from the useEffect() function.
I was also thinking that my extraReducers may be causing the problem. Here is my commentsSlice.js:
// Import createAsyncThunk and createSlice here.
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
// Create loadCommentsForArticleId here.
const loadCommentsForArticleId = createAsyncThunk(
'comments/loadCommentsForArticleId',
async (id,thunkAPI) =>{
console.log('inside dispatch');
const response = await fetch(`api/articles/${id}/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] = action.payload.comments;
state.isLoadingComments = false;
state.failedToLoadComments = false;
},
[loadCommentsForArticleId.rejected]: (state,action) => {
state.isLoadingComments = false;
state.failedToLoadComments = true;
state.byArticleId = {};
}
}
});
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;
Any ideas what may be causing the problem? Any help is appreciated! Happy coding 
