Redux Hooks Reactjs - Trying to create a structure

Question

I’m trying to create a login structure using Redux and Hooks in React.js. But I’m having an error that I’m not being able to understand why. Who knows good Javascript can help me.

The reference guide is: https://jasonwatmore.com/post/2020/03/02/react-hooks-redux-user-registration-and-login-tutorial-example

The only difference is I’m wearing TS.

I have a Login.tsx component where I am getting the email and password fields correctly.

Then I have a function:

function handleLogin() {
    setLoading(true)
    dispatch(userActions.login(email, password))
    setLoading(false)
}

This Dispatch calls the function below the userActions:

function login(email: string, password: string) {
    return (dispatch: any) => {
        try {
            const user = userService.login(email, password)
            dispatch({ type: "USER_LOGIN", user })
            history.push("/")
        } catch (err) {
            alert(err)
        }
    }
}

Calling the userService login function:

export const userService = {
    login: Function,
    logout: Function,
}

function login(email: string, password: string) {
    return firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            localStorage.setItem("user", JSON.stringify(user))
            return user
        })
}

I don’t really understand Redux very well and I don’t even know if it’s a good practice to leave the structure like this:

• userAction is responsible for saving the information to Redux and Torage
• userService is responsible for logging into Firebase.

But as soon as I call the function on the home page, I take this mistake:

I wonder what it might be?