the ProductList.js is "import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import {getAllProducts,updateProduct,deleteProduct} from '../../services/productService';

// Async thunk to fetch products
export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {
  const data = await getAllProducts();
  return data;
});

// Async thunk to update a product
export const updateProductById = createAsyncThunk(
  'products/updateProductById',
  async ({ productId, product_Name, product_Description, product_Price, product_Stock, product_isSale,category_Name,imageGallery_Id,image1,image2,image3,image4 }) => {
    console.log("all:"+ productId, product_Name, product_Description, product_Price, product_Stock, product_isSale,category_Name,imageGallery_Id,image1,image2,image3,image4)
    const cleanImages = (imageUrl) => {
      try {
        const url = new URL(imageUrl);
        let pathname = url.pathname.replace('/media/', '');
        return pathname; // This keeps only the pathname, removing domain and port
      } catch (error) {
        console.error('Invalid URL:', imageUrl, error);
        return imageUrl; // Return as-is if it’s not a valid URL
      }
    };

    const cleanedImage1 = cleanImages(image1);
    const cleanedImage2 = cleanImages(image2);
    const cleanedImage3 = cleanImages(image3);
    const cleanedImage4 = cleanImages(image4);

    const updatedProduct = await updateProduct(productId, {
      product_Name,
      product_Description,
      product_Price,
      product_Stock,
      product_isSale,
      category_Name,
      imageGallery_Id,
      image1:cleanedImage1,
      image2:cleanedImage2,
      image3:cleanedImage3,
      image4:cleanedImage4,
    });
    return updatedProduct;
  }
);

export const deleteProductById = createAsyncThunk(
    'products/deleteProductById',
    async (productId) => {
      await deleteProduct(productId);
      return productId;
    }
  );
// Initial state
const initialState = {
  products: [],
  loading: false,
  error: null,
};

// Create the slice
const productSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.loading = false;
        state.products = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })
      .addCase(updateProductById.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(updateProductById.fulfilled, (state, action) => {
        state.loading = false;
        state.updateProductByIdStatus='fulfilled'
        const index = state.products.findIndex((product) => product.product_Id === action.payload.product_Id);
        if (index !== -1) {
          state.products[index] = action.payload;
        }
      })
      .addCase(updateProductById.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })
      .addCase(deleteProductById.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(deleteProductById.fulfilled, (state, action) => {
        state.loading = false;
        state.products = state.products.filter((product) => product.product_Id !== action.payload);
      })
      .addCase(deleteProductById.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export default productSlice.reducer;" it's too big, please separate it into 2 components