Reddit client : problem updating state with slice reducers

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 :slight_smile:

That’s probably caused by this typo.

1 Like

Hey @mirja_t ! Thank you so much! You saved me a lot of headache. I send you the good vibes :slight_smile:

1 Like