how to get the value from redux store and display it using typescirpt and redux toolkit

I am working on react typescript and redux toolkit project I have feteched api response using axios and assign the response to redux store ,but when tried to get the value the from the store it information is not display

User.tsx

import React,{useState,useEffect} from "react";
import { UserService } from "../service/UserService";
import {useAppDispatch,useAppSelector} from '../redux/hooks'
import {DeleteCard, Getall} from '../redux/ActionSlice'
import {AiOutlineStar} from 'react-icons/ai'
import {IUser} from "../model/User";
import { AddFavourite } from "../redux/FavouriteSlice";
import { toast } from 'react-toastify';
import {useNavigate} from 'react-router-dom'
interface ISTATE{
    loading:boolean,
    users:IUser[],
    errorMsg:string,
}

const User:React.FC=()=>{
  const product=useAppSelector(state=>state.app.action)
  const navigate=useNavigate()
  const dispatch=useAppDispatch()
  const[state,setState]=useState<ISTATE>({
    loading:false,
    users:[] as IUser[],
    errorMsg:''
  })

  useEffect(()=>{
    UserService.getAllUsers().then(res=>dispatch(Getall(res.data.products))).catch(err=>setState({...state,loading:false,errorMsg:err}))
    setState({...state,loading:false,users:product}) 
    console.log(state.users)
  },[])
 
  const AddFav=(product:IUser)=>{
    dispatch(AddFavourite(product))
  }
    return(
        <div className="flex flex-wrap space-x-4  space-y-4 justify-center items-center">
         {state.users.length >0 && state.users.map((product,i)=>(
            <div key={i} className="flex flex-col items-center relative bg-white rounded-md shadow-lg shadow-zinc-400">
                <img src={product.avatar} alt="image" className="h-[300px] w-[300px] p-2 mt-6 object-contain "/>
                <h1 className="text-md m-2 w-full text-center font-medium">{product.name}</h1> 
                <h1>{product.developerEmail}</h1>
                <button onClick={()=>AddFav(product)} className="absolute top-0 right-0 p-2"><AiOutlineStar className="text-xl"/></button>
                <button onClick={()=>{dispatch(DeleteCard(product._id))}} className="bg-red-500 px-4 py-2 mt-2 rounded-md mb-2 text-white shadow-lg">Delete</button>
                <button onClick={()=>navigate(`/details/${product._id}`)}>More details</button>
            </div>
         ))}
        </div>
    ) 

}
export default User

Action Slice

import{createSlice,PayloadAction} from '@reduxjs/toolkit'
import { IUser } from '../model/User'
import { RootState } from './store'

const initialState:IUser[]=[]

const ActionSlice=createSlice({
    name:'action',
    initialState,
    reducers:{
        Getall:(state,action:PayloadAction<IUser>)=>{
            state.push(action.payload)
        },
        DeleteCard:(state,action:PayloadAction<string>)=>{
           const index = state.findIndex((todo) => todo._id === action.payload);
            state.splice(index, 1);
         },


         
    }

})
export const {DeleteCard,Getall}=ActionSlice.actions;
export const getProductList=(state:RootState)=>state.app.action
export default ActionSlice.reducer

IUser interface

export interface IUser{
    _id:string;
    avatar:string;
    name:string;
    category:string;
    description:string;
    developerEmail:string;
    price:number,
    
}

I have tried googling staff but would able to get solution to display the thing,it would be great if you guys help me out to figure out the solution

thank you in advance