Redux News Reader - Can not get comments to be return on while Fetching `api/articles/${id}/comments`

Hi everyone,
I have been stuck on the Redux News Reader. I believe my setup is correct but please correct me if I am wrong. My main concern is when I am fetching the comments using

  async (id) => {
    const response = await fetch(`api/articles/${id}/comments`);
    const json = await response.json(); 
    debugger
    return json; 
  }
)

stopping at the debugger and checking what json constant contains is always {articleId: 1, comments: Array(0)}. I am on step 10 of this exercise and it mentions that comments should display but the API never returns any comments. Please help. I will attach comments.js and commentsSlice.js

//commentsSlice.js

// Import createAsyncThunk and createSlice here.
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";  
// Create loadCommentsForArticleId here.
export const loadCommentsForArticleId = createAsyncThunk("comments/loadCommentsForArticleId", 
  async (id) => {
    const response = await fetch(`api/articles/${id}/comments`);
    const json = await response.json(); 
    debugger
    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: (builder) => {
    builder
      .addCase(loadCommentsForArticleId.pending, (state) => {
        state.isLoadingComments = true;
        state.failedToLoadComments = false;
      })
      .addCase(loadCommentsForArticleId.fulfilled, (state, action) => {
        state.isLoadingComments = false;
        state.failedToLoadComments = false;
        state.byArticleId[action.payload.articleId] = action.payload.comments;
      })
      .addCase(loadCommentsForArticleId.rejected, (state) => {
        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;



//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);

  // Dispatch loadCommentsForArticleId with useEffect here.
  useEffect(() => {
    if(article){
      dispatch(loadCommentsForArticleId(article.id))
    }
  }, [article])
  //comments are inside an array and comments are objects.
  const commentsForArticleId = article ? 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;
3 Likes

I couldn’t spot any problems with your code. I implemented your commentsSlice.js and Comments.js in my already working project and was able to display the comments. So there doesn’t seem to be something wrong with the code in those two files.

What threw me off in this project, and maybe it’s the same with you, is that not every article displayed has comments. The first article about Biden doesn’t display any comments. So even when your code is working, you won’t find any comments there.

The article about Kamala Harris should display comments, though.

Hi Michael,
Thank you for the reply. You are correct. The steps on the lesson make it seem that all articles should have comments. Only 2 had comments. I was so confused since I was getting 200 network code. I finish the exercise already.
Once again thank you for getting back to me.