Redux News Reader - not seeing comments

Redux News Reader

Hi, not seeing comments, not even with the Kamala story. Would be great if you could go over the code and find out whatever it is I’m missing! Thanks.


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

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;

  })

}

});

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

const commentsForArticleId = article ? comments[article.id] : ;

if (commentsAreLoading) return

Loading Comments
;

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;

Ok, I figured it out, there’s nothing wrong with this code.

This thread can be deleted…

1 Like

Very helpful comment for others who are facing the same problem, thanks!

1 Like

So, it has been 19 days since @microrockstar97864’s reply, but I was just now having a similar issue that brought me here. For anyone who will possibly encounter the same problem in the future, for me, it also wasn’t about the code. What happened is that I looked for comments only in the first article. However, taking a look at the mock comments file I found that only a few of the articles have them and the first one isn’t included. In the end, all was working fine, I was just looking in the wrong place. I imagine the same happened to @royeca.

Thanks. Yeah, that wasn’t what happened for me specifically, I just forgot something in some other file, like an import (forgot by now).

I would have deleted the initial post but there’s no permission to do so.

1 Like

Hello! I was dealing with a similar problem. Thanks for this.
However, I just finished with Async Actions with Middleware and thunks before starting this exercise and never did it mention passing “builder” as an argument for the extraReducers property, or any argument for that matter.
Probably a dumb question, but could somebody explain to me why builder is being passed?
thank you!

1 Like

Can someone explain this code to me? In particular comments[article.id]. It is being returned as undefined and I can’t make sense of it because comments is being populated with and object and I don’t see how passing in article.id will provide us with the comments that we need. I hope I’m just being stupid!

Hi all,
I was able to complete the project - redux news reader.
My question is, how can I make the comments show up in the comments section after I post it.
I realized I have to reload the article for the changes to appear.
Any idea on that would greatly help.

Thanks.

Not sure if you’ve figured this out already, but I had the same problem and it was because I wasn’t destructoring comments right in the commentsSlice.

.addCase(postCommentForArticleId.fulfilled, (state, action) => {
                state.createCommentIsPending = false;
                state.failedToCreateComment = false;

                const { articleId, ...comment } = action.payload;
                const existingComments = state.byArticleId[articleId] || [];
                state.byArticleId = {
                    ...state.byArticleId,
                    [articleId]: [...existingComments, comment],
                };
            })

I had left out … in the following part when desctructoring comment from action.payload.

const { articleId, ...comment } = action.payload;

Once I added … to comment, I was able to see the comments immediately after submitting, instead of having to click on the article preview to reload the article and the comments.