Redux - issue rending the Comments component

in this project i just in the first step that when I choose article from the list of all articles i don’t get it the comments from the API as well and it render me this kind of default in the console “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘push’)” an d in the same time it give me these information about the API “index.compiled.js:898 [MSW] Mocking enabled.
index.compiled.js:3038 [MSW] 10:35:35 GET /api/articles (200)
index.compiled.js:3038 [MSW] 10:35:37 GET /api/articles/1 (200)
index.compiled.js:3038 [MSW] 10:35:38 GET /api/articles/1/comments (200)” as you see the API is fulfilled but i didn’t know why isn’t render in the Comments component so there is my code:

the commentsSlice.js:
// Import createAsyncThunk and createSlice here.
import {createAsyncThunk, createSlice} from "@reduxjs/toolkit";
// Create loadCommentsForArticleId here.
export const loadCommentsForArticleId = createAsyncThunk("comments/loadCommentsForArticleId", async(articleId)=> {
  const response = await fetch(`api/articles/${articleId}/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.hasError = false;
    },
      [loadCommentsForArticleId.fulfilled]: (state, action)=> {
      state.isLoadingComments = false;
      state.hasError = false;
      const articleComments = state.byArticleId[action.payload.articleId];
      articleComments.push(action.payload[action.payload.articleId])
return {...state.byArticleId, articleId: articleComments};      
},
      [loadCommentsForArticleId.rejected]: (state, action)=> {
      state.isLoadingComments = false;
      state.hasError = 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;

the 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 = selectComments;
  const commentsAreLoading = isLoadingComments;
  let commentsForArticleId = [];
  if(!article){
    commentsForArticleId = []
  }else {
    commentsForArticleId = comments[article.id];
  }
  // Dispatch loadCommentsForArticleId with useEffect here.
  useEffect(()=> {
    if(article !== undefined) {
    dispatch(loadCommentsForArticleId(article.id))
    }
  }, [dispatch, article])

  if (commentsAreLoading) return <div>Loading Comments</div>;
  if (!article) return null;

  return (
    <div className='comments-container'>
      <h3 className='comments-title'>Comments</h3>
      <CommentList comments={comments} />
      <CommentForm articleId={article.id} />
    </div>
  );
};

export default Comments;
 

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.