Flashcards Project - Question on Extra Reducers

Web Development Full-Stack
1

url to the topic: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-redux/modules/wdcp-22-flashcards/projects/react-redux-flashcards

Hi there, I finished my Flashcards project yesterday. Everything seemed to be working except for one thing, displaying the number of quizzes associated with the topics on the topics display page. I checked the solution so the reason why it was not working properly is because, in topicsSlice.js (in extra reducers) I have used “addQuiz” as the action but instead i should have used “quizzes/addQuiz”. Could someone explain to me the reason for this syntax? i only learned how to use extraReducers with CreateAsyncThunks, so this is the first time i come across a syntax like “quizzes/addQuiz”. Below you can find my code. Thank you!
import { createSlice } from “@reduxjs/toolkit”;

const topicsSlice = createSlice({
  name: "topics",
  initialState: {
    topics: {},
  },
  reducers: {
    addTopic: (state, action) => {
      const { id, name, icon } = action.payload;
      state.topics = {
        ...state.topics,
        [id]: { id, name, icon, quizIds: [] },
      };
    },
  },
  extraReducers: {
    "quizzes/addQuiz": (state, action) => { //"Why use "quizzes/addQuiz" instead of addQuiz??
      console.log("action has been invoked");
      const { id, topicId } = action.payload;
      state.topics[topicId].quizIds.push(id);
    },
  },
});

export const selectTopics = (state) => state.topics.topics;
export const { addTopic, addQuiz } = topicsSlice.actions;
export default topicsSlice.reducer;