Redux news reader issue: Nothing appears when I click on an article

Hello everyone, I am currently having problems with the redux news reader project. Here is the link: redux news reader

I am currently on step 9 of the project. It asks to implement the useEffect function. I implement the function, but now when I click an article, the entire page disappears. Here is my code for that part written in 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);
const commentsForArticleId = article ? comments[article.id]: [];

  // Dispatch loadCommentsForArticleId with useEffect here.
  useEffect( () => {
    if(article)
    dispatch(loadCommentsForArticleId(article.id));
    },[article,dispatch]
  ) 
  
  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;

I also receive this error from the console:

It seems that my error is coming from the useEffect() function.

I was also thinking that my extraReducers may be causing the problem. Here is my commentsSlice.js:

// Import createAsyncThunk and createSlice here.
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';

// Create loadCommentsForArticleId here.
const loadCommentsForArticleId = createAsyncThunk(
  'comments/loadCommentsForArticleId',
  async (id,thunkAPI) =>{
    console.log('inside dispatch');
    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: {
    [loadCommentsForArticleId.pending]: (state,action) => {
      state.isLoadingComments = true;
    state.failedToLoadComments = false;

    },
    [loadCommentsForArticleId.fulfilled]: (state,action) => {
      state.byArticleId[action.payload.articleId] = action.payload.comments;
      state.isLoadingComments = false;
    state.failedToLoadComments = false;
   
    },
    [loadCommentsForArticleId.rejected]: (state,action) => {
      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;

Any ideas what may be causing the problem? Any help is appreciated! Happy coding :slight_smile:

1 Like

Hi guys,

I just realized I forgot to export the the function, loadCommentsForArticleId. :sweat_smile:

// Create loadCommentsForArticleId here.
export const loadCommentsForArticleId = createAsyncThunk( //I added export to the function 
  'comments/loadCommentsForArticleId',
  async (id,thunkAPI) =>{
    console.log('inside dispatch');
    const response = await fetch(`api/articles/${id}/comments`);
    const json = await response.json();
    return json;
    }
  )
2 Likes