Reactjs – Redux state object not saving data from form submission

When I submit a form to update state in Redux, the data populates for a second, then automatically refreshes, re-directs to localhost:3000/? & resets the state back to empty.

Here is the form for the code:

import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { newPost } from '../features/postSlice'

const Form = () => {

    const [post, setPost] = useState({ title: "", body: "" })

    const dispatch = useDispatch()  

    return (
        <>
            <form>
                <h1>Form</h1>
                <label>Title:</label>
                <input 
                    type="text"
                    value={post.title}
                    onChange={(e) => setPost({ ...post, title: e.target.value })}
                />
                <label>Body:</label>
                <textarea 
                    cols={25} 
                    rows={10} 
                    type="text"
                    onChange={(e) => setPost({ ...post, body: e.target.value })}
                />
                <button
                    onClick={() => {
                        dispatch(newPost({ title: post.title, body: post.body }))
                    }}
                >
                    Add Post
                </button>
            </form>
        </>
    )
}

export default Form

and here is the code for my postSlice.js file:

import { createSlice } from "@reduxjs/toolkit"

const initialStateValue = { title: "", body: "" }

export const postSlice = createSlice({
    name: "post",
    initialState: {
        value: initialStateValue
    },
    reducers: {
        newPost: (state, action) => {
            state.value = action.payload
        }
    }
})

export const { newPost } = postSlice.actions

export default postSlice.reducer

When I submit data as an object to another file, userSlice.js, just as an object with some data, it changes the state and works fine. When I try to submit data from a form, it does not work. It does not give me a console error, just shows "No store found. make sure to follow the instructions." For a brief moment in the redux devtools, then re-sets the state with no console errors.

Here is the code for Login.js that works fine:

import { useDispatch } from "react-redux"
import { login, logout } from '../features/userSlice'

const Login = () => {
  const dispatch = useDispatch()

  return (
    <>
      <button onClick={() => {
        dispatch(login({ name: "User", age: 33, email: "[email protected]"}))
      }}>login</button>

      <button onClick={() => {
        dispatch(logout())
      }}>logout</button>
    </>
  )
}

export default Login

and for userSlice.js, which also works fine:

import { createSlice } from '@reduxjs/toolkit'

const initialStateValue = { name: "", age: null, email: "" }

export const userSlice = createSlice({
    name: "user",
    initialState: {
        value: initialStateValue
    },
    reducers: {
        login: (state, action) => {
            state.value = action.payload
        },
        logout: (state, action) => {
            state.value = initialStateValue
        }
    }
})

export const { login, logout } = userSlice.actions

export default userSlice.reducer

This is just a simple Redux Toolkit tutorial from YouTube I copied, the form is my own code. There is clearly something I am missing. Any help that anyone can provide is GREATLY appreciated. Thanks!