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!