Hello everyone,
I am currently working on the reddit client project. Here is the link to the project.. I am having issues rendering comments because I am encountering an issue with updating the state with the commentsReducer.
This is the error that I receive:
It says that “The slice reducer for key “comments” returned undefined during initialization”. I’m not sure why it’s returning undefined. I would think it would return an empty array. Here is my commentsSlice.js:
import React, {useState,useEffect} from 'react';
import {createAsyncThunk, createSlice,current} from '@reduxjs/toolkit';
import{useDispatch, useSelector} from 'react-redux';
export const commentsSlice = createSlice (
{
name:'comments',
initalState:{
comments: [],
isLoadingComments:false,
failedToLoadComments:false
},
reducers:{
startGetComments(state){
state.isLoadingComments = true;
state.failedToLoadComments = false;
},
getCommentsSuccess(state,action){
state.isLoadingComments = false;
state.comments = action.payload;
// console.log('the current state',current(state));
},
getCommentsFailed(state){
state.isLoadingComments = false;
state.failedToLoadComments = true;
}
},
}
);
export const {
startGetComments,
getCommentsSuccess,
getCommentsFailed
} = commentsSlice.actions;
export default commentsSlice.reducer;
export const loadComments = (permalink) => async(dispatch) => {
const response = await fetch(`https://www.reddit.com${permalink}.json`);
const json = await response.json();
if(response.ok){
//console.log('json response',json);
const commentsList = json[1].data.children.map(element=> element.data.body);
// console.log('permalink',permalink);
// console.log('the comments list', commentsList);
dispatch(getCommentsSuccess(commentsList))
//console.log(dispatch(getCommentsSuccess(commentsList)));
}
}
export const selectComments = (state) => state.comments.comments;
Here is my commentsContainer.js:
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {FaRegCommentAlt} from "react-icons/fa";
import { loadComments,selectComments } from './commentsSlice';
export const CommentsContainer = (props) => {
const [commentsArr,setCommentsArr] = useState([]);
const dispatch = useDispatch();
const comments = useSelector(selectComments);
//console.log('comments from useSelector',useSelector(selectComments));
useEffect(() => {
dispatch(loadComments(props.article.permalink));
setCommentsArr(comments);
},commentsArr)
//console.log('the comments array', commentsArr);
return(
<>
<div className="footer_items">
<h2>{props.article.author}</h2>
{/* <h2>{hours}</h2> */}
<button onClick = {()=> dispatch(loadComments(props.article.permalink))} className="comment_button">
<FaRegCommentAlt size="1.7rem"/>
</button>
</div>
<div className='comments_section'>
<h2>First Comment:</h2>
{commentsArr !== undefined ? <p>{commentsArr[0]}</p> : '' }
</div>
</>
)
}
and here is my store.js:
import { configureStore } from '@reduxjs/toolkit';
import subredditsReducer from '../features/subredditSection/subredditSlice';
import mainfeedReducer from '../features/mainfeedSection/mainfeedSlice';
import commentsReducer from '../features/commentsSection/commentsSlice';
import {createStore,combineReducers} from 'redux';
export const store = configureStore({
reducer: combineReducers({
subreddits:subredditsReducer,
mainfeedArticles:mainfeedReducer,
comments:commentsReducer
})
});
Perhaps the issue is coming from this line export const selectComments = (state) => state.comments.comments; which is from commentsSlice.js. I’m not sure if I am using the selector properly. Any help is appreciated. Take care and happy coding 