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
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.
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.
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. 
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).
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 
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
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>
);
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):
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
@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.
You can console.log(action.payload) within the loadCommentsForArticleId.fulfilled reducer and view the console in DevTools.
â â â â !! 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!
Greetings all. Was just wondering if anybody was having trouble with the articles showing. This project states in the project description
" Currently, the app fetches and displays a list of all articles in their preview form. It also fetches and displays the current article, which can be selected and changed by the user."
I am at step 7 and I have not seen a single article appear. (Makes it challenging to find a space for comments per article, when I cannot even see the article). Anybody else having this issue? Or do I just need to continue through and the articles will reveal themselves as I add props to components???
It seems like the mock API is not even being accessed appropriately. But its hard to say.
Thanks
Thank you, Krisaog! That third line did the trick for me!
Look at where the data is being fetched in the âmocksâ directory that way you can see where the comments and the articles are being fetched from.