Redux News Reader
Hi, not seeing comments, not even with the Kamala story. Would be great if you could go over the code and find out whatever it is I’m missing! Thanks.
// Import createAsyncThunk and createSlice here.
import { createAsyncThunk, createSlice} from ‘@reduxjs/toolkit’;
// Create loadCommentsForArticleId here.
export const loadCommentsForArticleId = createAsyncThunk(
‘comments/loadCommentsForArticleId’,
async (id) => {
const response = await fetch(`api/articles/${id}/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: (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;
})
}
});
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;
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) {
dispatch(loadCommentsForArticleId(article.id))};
}, [article]);
const commentsForArticleId = article ? comments[article.id] : ;
if (commentsAreLoading) return
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;