Redux News Reader

So I am currently stuck on this code and I don’t understand why it is not rendering. It stopped rendering at step three and now I am on step 7 and I am getting a syntax error that makes zero sense… would appreciate some help

// Import createAsyncThunk and createSlice here.
import {createAsyncThunks, 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: {
    byArticleId: {},
    isLoadingComments: false,
    failedToLoadComments: false,
  },
  extraReducers:{
   
      loadCommentsForArticleId.pending: (state,action) => {
        state.isLoadingComments = true;
        state.failedLoadingComments = false;
      },
      loadCommentsForArticleId.fulfilled: (state,action) => {
        state.isLoadingComments = false;
        state.failedToLoadComments = false;
        byArticleId = action.payload.id;
      },
      loadCommentsForArticleId.rejected: (state,action) => {
        state.isLoadingComments = false;
        state.failedLoadingComments = 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;

here is the error

SyntaxError: /home/ccuser/workspace/news-reader-2/features/comments/commentsSlice.js: Unexpected token, expected "," (22:30)

  20 |   extraReducers:{
  21 |    
> 22 |       loadCommentsForArticleId.pending: (state,action) => {
     |                               ^
  23 |         state.isLoadingComments = true;
  24 |         state.failedLoadingComments = false;
  25 |       }, while parsing file: /home/ccuser/workspace/news-reader-2/features/comments/commentsSlice.js
    at Object._raise (/home/ccuser/node_modules/@babel/parser/lib/index.js:798:17)
    at Object.raiseWithData (/home/ccuser/node_modules/@babel/parser/lib/index.js:791:17)
    at Object.raise (/home/ccuser/node_modules/@babel/parser/lib/index.js:752:17)
    at Object.unexpected (/home/ccuser/node_modules/@babel/parser/lib/index.js:3257:16)
    at Object.expect (/home/ccuser/node_modules/@babel/parser/lib/index.js:3231:28)
    at Object.parseObjectLike (/home/ccuser/node_modules/@babel/parser/lib/index.js:11945:14)
    at Object.parseExprAtom (/home/ccuser/node_modules/@babel/parser/lib/index.js:11432:23)
    at Object.parseExprAtom (/home/ccuser/node_modules/@babel/parser/lib/index.js:7159:20)
    at Object.parseExprSubscripts (/home/ccuser/node_modules/@babel/parser/lib/index.js:11081:23)
    at Object.parseUpdate (/home/ccuser/node_modules/@babel/parser/lib/index.js:11061:21)
 

Ok so I fixed the error but nothing is rendering

// Import createAsyncThunk and createSlice here.
import {createAsyncThunks, 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: {
    byArticleId: {},
    isLoadingComments: false,
    failedToLoadComments: false,
  },
  extraReducers:{
   
      [loadCommentsForArticleId.pending]: (state,action) => {
        state.isLoadingComments = true;
        state.failedLoadingComments = false;
      },
      [loadCommentsForArticleId.fulfilled]: (state,action) => {
        state.isLoadingComments = false;
        state.failedToLoadComments = false;
        byArticleId = action.payload.id;
      },
      [loadCommentsForArticleId.fulfilled]: (state,action) => {
        state.isLoadingComments = false;
        state.failedLoadingComments = 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;

Update: still on this project but on step 14 and nothing is rendering

// 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 postCommentForArticleId  = createAsyncThunk('comments/postCommentsForArticleId', 
async ({articleId,comment}) => {
const requestBody = JSON.stringify({comment:comment})
const response = await fetch(`api/articles/${articleId}/comments`,{
  method:'POST',
  body: requestBody
});
const json = await response.json();
return json;
}
)

export const commentsSlice = createSlice({
  name: 'comments',
  initialState: {
    byArticleId: {},
    isLoadingComments: false,
    failedToLoadComments: false,
    createCommentIsPending:false,
    failedToCreateComment:false,
  },
  extraReducers:{
   
      [loadCommentsForArticleId.pending]: (state,action) => {
        state.isLoadingComments = true;
        state.failedLoadingComments = false;
      },
      [loadCommentsForArticleId.fulfilled]: (state,action) => {
        state.isLoadingComments = false;
        state.failedToLoadComments = false;
       state.byArticleId[action.payload.articleId] = action.payload.comments;
      },
      [loadCommentsForArticleId.fulfilled]: (state,action) => {
        state.isLoadingComments = false;
        state.failedLoadingComments = true;
      },
// here is where it is going wrong everything else works fine
      [postCommentsForArticleId.pending]: (state,action) => {
      state.createCommentIsPending = true;
      state.failedToCreateComment = false;
    },
    [postCommentsForArticleId.rejected]: (state,action) => {
      state.createCommentIsPending = false;
      state.failedToCreateComment = true;
    },
    [postCommentForArticleId.fulfilled]: (state, action) => {
      state.createCommentIsPending = false;
      state.failedToCreateComment = false;
      state.byArticleId[action.payload.articleId].push(action.payload);
    }
      
    }
  }
);

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;