reactjs - How to submit a form with react and redux?

Question

I am trying to submit a POST form with a simple html form and I also use redux with a userAction which allows to store the user and the token returned by the express js API, but the submission does not work, when I submit the form, nothing happens I can't even get into the fetch function of the action.

import '../styles/ConnexionModal.css';
import { userLogin } from '../redux/userActions';
import { useState } from 'react';
// import { useSelector } from 'react-redux';

const ConnexionModal = ({ showModal, hideModal }) => {
    
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    // const message = useSelector(state => state.userReducer.message);
    // console.log(message);

    const handleChangeEmail = (event) => {
        setEmail(event.target.value);
    }

    const handleChangePassword = (event) => {
        setPassword(event.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        userLogin(email, password);
    }

    return (
        showModal && ( 
        <div className="modalBg">
            <div className="modalContainer">
                <div className="modalHeader">
                    <h1 className="modalTitle">Connexion</h1>
                </div>
                <div className="modalBody">
                    <form method="POST" onSubmit={handleSubmit}>
                        <div className="formGroup">
                            <label htmlFor="email" className="info">Email</label>
                            <input className="field" name="email" id="email" type="email" value={email} onChange={handleChangeEmail} autoFocus required />
                        </div>
                        <div className="formGroup">
                            <label htmlFor="password" className="info">Mot de passe</label>
                            <input className="field" name="password" id="password" type="password" value={password} onChange={handleChangePassword} required />
                        </div>
                        <div className="formGroup">
                            <label htmlFor="connexion" className="submitButton">Se connecter</label>
                            <input className="field submit" id="connexion" name="submit" type="submit" />
                        </div>
                    </form>
                </div>
                <div className="close">
                    <button onClick={() => hideModal()} className="closeButton">Fermer</button>
                </div>
            </div>
        </div>
        )
    )

}

export default ConnexionModal;

question from:https://stackoverflow.com/questions/65922131/how-to-submit-a-form-with-react-and-redux

Answer 1

I assume you are also using redux-thunk.

You should always pass the action inside your container to a redux dispatch function. E.g.

import '../styles/ConnexionModal.css';
import { userLogin } from '../redux/userActions';
import { useState } from 'react';
import { useDispatch } from 'react-redux';

const ConnexionModal = ({ showModal, hideModal }) => {
    const dispatch = useDispatch();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleChangeEmail = (event) => {
        setEmail(event.target.value);
    }

    const handleChangePassword = (event) => {
        setPassword(event.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        dispatch(userLogin(email, password));
    }

    ...