Возникли проблемы с добавлением в состояние через форму и перенаправлением с маршрутами при отправке формы с реакцией, избыточностью

Question

Итак, я новичок в Redux и в коде в целом, но я пытаюсь создать форму для добавления имени клиента, которое должно быть сохранено в пользовательское состояние через мой редуктор setUser. Это не работает так, как я хочу, поэтому onChange - это неправильная вещь, но я еще не нашел правильный способ сделать это, кто знает или у кого есть предложения?

Отправьте btn с handleSignInSubmit Функция не перенаправляет, на данный момент единственное, что происходит, - это то, что она извлекает данные из API через диспетчерскую систему. Я чувствую, что я все перепробовал прямо сейчас, так что если кто-нибудь увидит, что я делаю неправильно, это будет удивительно? Ссылка работает. (Я пробовал включить форму, но это означает, что как только я нажимаю в любом месте страницы, я перенаправлен)

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux'
import { messages, fetchAllMessages } from 'reducer/messages'
import 'styles/SignIn.css'

export const SignIn = () => {
    const [name, setName] = useState(" ");
    const dispatch = useDispatch()

Этот "handleSignInSubmit" выбирает все сообщения, но не перенаправление на / сообщения

    const handleSignInSubmit = (event) => {
        event.preventDefault()
        console.log('handleSignInSubmit')
        dispatch(fetchAllMessages())

    }
`````
I would like a function to add the name from the input to my store reducer:setUser
`````
    const handleNameSubmit = (event) => {
        event.preventDefault()
        dispatch(messages.actions.setUser(name))
        console.log('newUser', name)
    }

    return (
        <div className="sign-in-container">
            <h1>Welcome {name}!</h1>

            <form
                //onChange={handleNameSubmit} //this adds each letter I type as payload?
                className="sign-in-form">
                <label>Name:</label>
                <input className="name"
                    type="name"
                    onChange={event => setName(event.target.value)}
                    value={name}
                    required
                />

                <div className="submit-btn-container">
                    <Link to={`/messages`}>
                        <button
                            className="submit-btn"
                            type="submit"
                            title="Submit"
                            //when onClick the allMessages fetches
                            onClick={handleSignInSubmit}
                        >
                            Sign in
                        </button>
                    </Link>
                </div>
            </form>
        </div >
    )
}