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>
    );