Redux News Reader

Hello I have been stuck on the Redux News Reader project in the Learn Redux portion of the full-stack engineer path for a week now. In this project, unlike others it seems that I am not provided with a terminal and I feel like I could figure out my issues if I could test parts of the project by logging to the console. Is there some way to access the terminal that I am unaware of?

Here is the project url:
https://www.codecademy.com/courses/learn-redux/projects/redux-news-reader

1 Like

What I tend to do is download all the files and create my own project on my computer.

Can’t you do that on this one? Just an idea.

1 Like

I also struggled with this project a lot, because it did not compile what I had edited correctly for quite some time despite clicking save several times. I had to wait until the next day to see all my changes displayed.
Unfortunately there is no download option for this project as there is with other React projects. Maybe that’s because Codecademy uses a fake DB for the articles as they mention in the project introduction. But I saw the articles hardcoded in on of the folders. So it would be really helpful if that could be added some time.
You can still use the browser’s console, but you have to ignore some potential messages that aren’t related to your work but the Codecademy environment. Or you install React with Redux independently, copy file by file and install dependencies if needed. I haven’t tried that though.

1 Like

Yes, sorry there. You’re right!

That was actually what I meant when I wrongly typed ‘download all the files’ (although I haven’t yet gone into Redux, so I still haven’t had to deal with that), but so far at least with CRA, what I do is I have a specific folder in my computer where I npx create-react-app my_CC_project and then open that folder in VSC with cd my_cc_project and then code . which should open that folder in Code.

Then, like you said in the last part of your message, I patiently copy the relevant files (or lines, for example, in the case of index.html) and I delete the test files, css (after I copied styles.css into a styles.css in the public folder and link it from index.html), and a few files that I won’t need, and then work there.

I know, this takes a few more minutes of setup, but like you both commented and I agree, there are things like the console, React Dev Tools, etc. that work way more conveniently for debugging. Well, at least I give my two cents, because sincerely this works for me, but maybe not for everyone. Just in case it helps. :slight_smile:

Additional note: If you have Redux, I was looking around and maybe you can use their template for CRA, creating the app instead with npx create-react-app my-cc-project --template redux. (Although I haven’t tested this yet, I confess).

2 Likes

Hey, did you manage to complete the project. If so can you help me on task 7 point 3, because i have been struggling for a minute now lol. Thanks!

Hello, unfortunately that is I think where I am stuck as well… either there or the next step. I have not been able to get comments to render and without the javascript console I have not yet been able to pinpoint where my issue is. I am planning on trying to replicate the project on my computer with vscode with the hope of being able to figure this project out. I will hopefully be able to return to the project either this afternoon or tomorrow sometime and would be happy to help if I can! And if you get it figured out I would love some advice as well!

Hey Jon, I was able to complete the part where you can fetch the comments from the API and render them on the articles. The problem was that some articles didn’t have comments, that’s why no comments were displayed. An article with Kamala Harris was one of the articles that had comments.

Here is my solution about the first part, hopefully I was able to help you. Thanks for responding :grinning_face_with_smiling_eyes:

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; // Create loadCommentsForArticleId here. ``` type or paste code here ``` export const loadCommentsForArticleId = createAsyncThunk("comments/loadCommentsForArticleId", async (id) => { const response = await fetch(`api/articles/${id}/comments`); const json = await response.json(); return json; } ) 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; state.byArticleId = {}; }) }

Hey Jon I tried to reply with the solution but I think it’s against the guidelines. For me the problem was that some articles didn’t have comments, that’s why nothing was being displayed. The Kamala Harris Article has comments so you should be able to see them after you complete the tasks.

This is my solution for task 7 point 3

     state.isLoadingComments = false;

    state.failedToLoadComments = false;

    state.byArticleId[action.payload.articleId] = action.payload.comments;

If you need anything you can send me a message I’ll be more than happy to help you :slight_smile:

1 Like

Hello there,

I have trouble displaying the comments on the Redux News Reader project.

In the link above provided, you can see my code. Please help me figure out why the comments are not being displayed.

Many thanks!

Hi @course4234204626 ,
Please re-uppdate the CommentList.js as below:

    return (
        <ul className='comments-list'>
            {comments.map((cmt) => (  <!--- NEW
                    <Comment comment={cmt} />
            ))}
        </ul>
    );
1 Like

Thanks for this. Have been staring at the code in a dissociated state for hours. For any future readers: if using a brace (as the OP and myself did), you need to Return your desired result. If you use the bracket, then you don’t need to include Return. i.e. the return must be explicit when using a block (braces):

1 Like

Hello guys. This has to be the most frustrating project I have ever worked on. I’ve tried everything, and the code seems solid, but the comments won’t show. I am aware that some articles had none, but even the Kamala Harris one doesn’t display comments for me. The comments I add aren’t displayed either; the input just clears and I am left with nothing.

For some reason, I was unable to make use of the terminal on this one, so it was just “hit run and pray” the whole time. And the code editor kept refreshing my code (despite me saving it) so I had to restart from scratch a couple of times, very annoying. The instructions on how to handle the fulfilled states were pretty obscure too imo, quite difficult to follow. I have tried the solutions suggested to other learners who encountered the same issues I did, but no luck. Kindly tell me what I am getting wrong.

Here’s my code for the Redux News Reader Project:

Hello friends. I haven’t got the skills to check your code and see whats wrong, but i managed to take it up to step 10 and make the comments work. Hope it helps!

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 data = await fetch(`api/articles/${id}/comments`);
    const json = await data.json();
    console.log(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 = false;
      })
  }
});

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 !== undefined) {

      dispatch(loadCommentsForArticleId(article.id))};

  }, [dispatch, article]);

const commentsForArticleId = article ? comments[article.id] : [];

  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;

Comments.List.js

import React from 'react';

import Comment from './Comment';

export default function CommentList({ comments }) {

  if (!comments) {

    return null;

  }

  

  return (

    <ul className='comments-list'>

      {

         comments.map((comment)=>{

         return <Comment comment={comment} />})

      }

    </ul>

  );

}

Hello,
Regarding commentsSlice.js

How do you know that action.payload has .comments and .articleId properties?

Thank you

1 Like

@grishabezshaposhniko I was stuck on the same thing because they didn’t explain how to get the comments from the action.payload in the steps. They did mention that the payload had an articleId property though.

1 Like

You can console.log(action.payload) within the loadCommentsForArticleId.fulfilled reducer and view the console in DevTools.

1 Like

■■■■!! You saved me! Thanks guys!
I did rewrite the whole thing trying to find why the comments where not rendering and it was this missing return inside my curly braces…

Hey everyone. Not sure if this will help any of you, but this project was very frustrating to me. I had problems both with loading the comments, and then getting mine to post. I went so far as to copy my code into VSCode and side-by-side compare it with some code I found here and elsewhere, and found that mine pretty much was the same.

I finally got it to work by cutting my code, replacing it with gibberish, and then re-pasting my code back into the editor. I did this on all the files. Don’t ask me what thought process let me to that, but when my code went back in EXACTLY AS IT WAS BEFORE, it worked. I don’t know why or how. I even tried Firefox and Chrome, and got the same result. So, if your code is correct, try something like I did to drastically change what you’re saving, and then re-paste. It may just work!