Redux News Reader - can't get comment text to show up on page from returned object

I am also getting nothing rendered in firefox. Bit annoying as I got to step 10 before I realised there was supposed to be anything showing in the browser. This is the console error it gives but I can’t see a way to run that command myself

I reset the exercise just to check and there is nothing rendered in the browser from the start.

Hello ladies and gentlemen.


That’s really sad to say, but tasks №9 && №10 are broken. Not because they are not working, just because we can’t see the comments from API requests because they are not there. So when I tried to check where is the problem I found, that it’s just an empty array received.
So please, admins or moderators, fulfil the comments on your server or give us instructions to check the console to be sure that everything is ok.

I am caught on step 15 nothing is posting and I don’t understand why

CommentSlice

// 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 postCommentForArticleId  = createAsyncThunk('comments/postCommentsForArticleId', 
async ({articleId,comment}) => {
const requestBody = JSON.stringify({ articleId:articleId,comment:comment})
const response = await fetch(`api/articles/${articleId}/comments`,
{
  method:'POST',
  body: requestBody
});
const json = await response.json();
return json;
}
)

export const commentsSlice = createSlice({
  name: 'comments',
  initialState: {
    byArticleId: {},
    isLoadingComments: false,
    failedToLoadComments: false,
    createCommentIsPending:false,
    failedToCreateComment:false,
  },
  extraReducers:{
   
      [loadCommentsForArticleId.pending]: (state,action) => {
        state.isLoadingComments = true;
        state.failedLoadingComments = false;
      },
      [loadCommentsForArticleId.fulfilled]: (state,action) => {
        state.isLoadingComments = false;
        state.failedToLoadComments = false;
       state.byArticleId[action.payload.articleId] = action.payload.comments;
      },
      [loadCommentsForArticleId.fulfilled]: (state,action) => {
        state.isLoadingComments = false;
        state.failedLoadingComments = true;
      },
      [postCommentForArticleId.pending]: (state,action) => {
      state.createCommentIsPending = true;
      state.failedToCreateComment = false;
    },
    [postCommentForArticleId.rejected]: (state,action) => {
      state.createCommentIsPending = false;
      state.failedToCreateComment = true;
    },
    [postCommentForArticleId.fulfilled]: (state, action) => {
      state.createCommentIsPending = false;
      state.failedToCreateComment = false;
      state.byArticleId[action.payload.articleId].push(action.payload);
    }
      
    }
  }
);

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;

CommentForm

mport React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  createCommentIsPending,
  postCommentForArticleId
} from '../features/comments/commentsSlice';

export default function CommentForm({ articleId }) {
  const dispatch = useDispatch();
  const [comment, setComment] = useState('');
  
  // Declare isCreatePending here.

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(postCommentForArticleId(
      {articleId,
      comment
      }
      ))
    setComment('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label for='comment' className='label'>
        Add Comment:
      </label>
      <div id='input-container'>
        <input
          id='comment'
          value={comment}
          onChange={(e) => setComment(e.currentTarget.value)}
          type='text'
        />
        <button
          
          className='comment-button'
        >
          Submit
        </button>
      </div>
    </form>
  );
}

Hi martyg_london,

Thank you for sharing. It made me think that in CommentSlice/extraReducers I did not add state.comments = {}; Only added:
.addCase(loadCommentsForArticleID.rejected, (state,action) => {
state.isLoadingComments = false;
state.failedToLoadComments = true;

I’m trying to figure out why to add a state.comments at rejected? Working long on this project. May simply overlook something…

Thank you already!

I just had the same problem.
It actually wasn’t our fault.

In step 11 it literally says to use postCommentForArticleId:

  • Declare a new exported variable called postCommentForArticleId .

Then in step 14 it says to use postCommentsForArticleId for the extraReducers:

Now modify the extraReducers property of your slice configuration options by adding a reducer for each of the three promise lifecyle actions dispatched by postCommentsForArticleId

I really hope they fix these kinds of mistakes since learners can get stuck for hours just because of a typo!