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…

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

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!