Add: categorySlice include it to the store and call it

src/app/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { reducer as bookReducer } from '../features/book/bookSlice'
+import { reducer as categoryReducer } from '../features/category/categorySlice'
 
 export const store = configureStore({
   reducer: {
     books: bookReducer,
+    categories: categoryReducer,
   },
 })
 

src/components/BookList/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import { useAppDispatch, useAppSelector } from '../../app/hooks'
 import { fetchBooks } from '../../features/book/bookSlice'
+import { fetchCategories } from '../../features/category/categorySlice'
 import LoadingSpinner from '../LoadingSpinner'
 import AddBookModal from '../AddBookModal'
 import BookCard from '../BookCard'
@@ -11,11 +12,11 @@ const BookList: React.FC = () => {
   const isLoading = useAppSelector((state) => state.books.isLoading)
 
   useEffect(() => {
-    const fetchBooksData = async () => {
-      await dispatch(fetchBooks())
+    const fetchBooksAndCategoriesData = async () => {
+      await Promise.all([dispatch(fetchBooks()), dispatch(fetchCategories())])
     }
 
-    fetchBooksData()
+    fetchBooksAndCategoriesData()
   }, [dispatch])
 
   return (

src/features/category/categorySlice.ts

@@ -0,0 +1,54 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+export interface Category {
+  id: string
+  name: string
+  books: string[]
+  created_at: string
+  updated_at: string
+}
+
+type initialState = {
+  categoriesData: Category[]
+  isLoading: 'idle' | 'loading' | 'succeeded' | 'failed'
+  error: string | null
+}
+
+const initialState: initialState = {
+  categoriesData: [],
+  isLoading: 'idle',
+  error: '',
+}
+
+export const fetchCategories = createAsyncThunk(
+  'categories/fetchCategories',
+  async () => {
+    const response = await axios.get(
+      'https://helm-bookstore-api.onrender.com/api/categories/'
+    )
+    return response.data
+  }
+)
+
+export const categorySlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchCategories.pending, (state) => {
+        state.isLoading = 'loading'
+      })
+      .addCase(fetchCategories.fulfilled, (state, action) => {
+        state.isLoading = 'succeeded'
+        state.categoriesData = action.payload.categories
+      })
+      .addCase(fetchCategories.rejected, (state, action) => {
+        state.isLoading = 'failed'
+        state.error = action.error.message || 'Unknown error'
+      })
+  },
+})
+
+export const { actions, reducer } = categorySlice