Redux -Having a 404 errror and state.category.push(action.payload) not a function error

Question

I'm getting a 400 client error and saying state.category.push is not a function and the current state is pending. I will be happy if someone helps me out on this. The category array is not accepting the data coming into it. I have both the form file and the reducer file down there. I am trying to create a category array to accepts users category and later output it out.

blogSlice.js My Reducer file

const urlParams = new URLSearchParams(window.location.search)
const TokenAuthless = urlParams.get('enter')
if(TokenAuthless){localStorage.setItem('authless', 
JSON.stringify(TokenAuthless))}
var Token = JSON.parse(localStorage.getItem("authless"))

const initialState = {
    blogItems: [],
    isLoading: null,
    category: [{}],
    authors: [],
}

const categoryUrl = 'api/v1/admin/createBlogCat';
var api_origin = 'xxxxxxxxxxxx'

export const insertCategory = createAsyncThunk('blog/insertCategory', async(data, 
thunkAPI) => {
    const{ rejectWithValue } = thunkAPI;
    try {
        const res = await fetch(`${api_origin}/${categoryUrl}`,{
            method :'POST',
            mode: 'cors',
            body: JSON.stringify({data}),
            headers : {
                'Authorization': `Bearer ${Token}`,
                'Content-type':'application/json',
                'Accept':'application/json',
                'Access-Control-Allow-Origin':'*',
            },
        })
        const catData = await res.json();
        return catData.data;
    } catch (error) {
        return rejectWithValue(error.message)
    }
})

[insertCategory.pending]:(state, action) => {
     state.isLoading = true;
 },

    [insertCategory.fulfilled]: (state, action) => {
        state.isLoading = false;
        console.log(action.payload);
        console.log(current(state))
        state.category.push(action.payload);
        console.log('the state category', state.category);          
    },

    [insertCategory.rejected]:( state, action ) => {
        state.isLoading = false;
    },

CreateCategory.js Creating a form to accept the input here

const CreateCatAut = () => {
    const [name, setName] = useState('');
    const dispatch = useDispatch()

    const handleSubmit=(e)=>{
        e.preventDefault();
        const categoryData = {name}
        dispatch(insertCategory(categoryData));
        console.log(categoryData)
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="Active Input" 
                   value={name}
                    onChange={(e)=> setName(e.target.value)} />   
    )

Answer 1

It means that your state.category is not an array. At

state.category.push(action.payload)

I assigned a value to the state.category which is not yet an array. By first creating an array and then putting that element into it.

state.category= [action.payload]

and at the next iterations, i will have an array with one element and can use push on it.