Redux News Reader Code Solution

Hi,

So there is no code solution for this project which I found annoying as In the past this is where I have learned a lot. I thought I would share my solution which appears to work in order to help others in a way I wish I could have been helped.

My code or solution is probably not the best and I am still very much learning React/Redux so please keep this in mind when you check out my code solution.

I struggled with this project and found coming back to it after a day really helped me see what I had to do and approach the challenge with a better “problem solver/learner” mindset rather than one of “just complete it and move on / frustration”.

Anyway, I just hope this can help… just click on the link and you can see the solution on Github.

Best of luck,
NT

11 Likes

Thank you!!! I will try to solve the exercise with your code. Thanks a lot!

Thanks, man, it actually works. Helped alot.

Thank You!!! I was missing one minuscule detail that drove me nuts for hours. This was a lifesaver

Thank you so much for posting this. It was nice to have something to check my code against. Was missing a few little bits here and there that was causing me to bang my head on the wall and now it makes sense. (had forgotten to export one thing)

I couldn’t get my code to work, all that rendered was “All Articles”, I tried your code and got the exact same thing! I’m at a loss here… Is it the API that somehow isn’t working correctly even though I’m not getting any error messages? I’m so confused :confused:

I am also very new to Redux and all of this is coming off as “Hey, I’m doing it, but I dont exactly know how or why its working” With that said, I could be completely wrong about this, but shouldnt your extraReducers in commentSlice.js read "
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;
})
"

It’s my understanding that pending will always be loading =true and failed= false, fulfilled will always be loading = false failed= false and rejected will always be loading = false failed= true.

Am I correct there?

Thank you you’re an absolute legend! Couldn’t figure out this assignment at all