not_working_app.tsx

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { usePutFormMutation } from "../formApi";
import { useDispatch, useSelector } from 'react-redux'

type Inputs = {
  name: string,
};

export default function FormPageTwo() {
  const dispatch = useDispatch();
  const formData = useSelector(getFormData);
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();
  const [
    sendForm,
    { data, isLoading: isUpdating, isError, isSuccess },
  ] = usePutFormMutation()
    
  const onSubmit: SubmitHandler<Inputs> = (data) => {
    /* Save this page data to redux. There's already some data to be sent in the state. */
    dispatch(setFormData(data));
    /* And send it... Or not. The state is not updated synchronously with dispatch
       so this would only send data that is already saved in the formData object
    */
    sendForm(formData);
  };
  
  useEffect(() => {
    if(isSuccess) {
      /* For some reason this does not trigger.. */
      console.log(data);
    }
  }, [isSuccess, data])
  
  if(isUpdating) {
    return (<div>Wait a minute..</div>);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {isError && (<div>Error, try again!</div>)}
      <input defaultValue="eminem" {...register("name")} />
      <input type="submit" />
    </form>
  );
}

working_app.tsx

import React, {useEffect} from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { usePutFormMutation, getFormData, getReadyToSend } from "../formApi";
import { useDispatch, useSelector } from 'react-redux'

type Inputs = {
  name: string,
};

export default function FormPageTwo() {
  const dispatch = useDispatch();
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();
  const formData = useSelector(getFormData);
  const readyToSend = useSelector(getReadyToSend);
  const [
    sendForm,
    { data, isLoading: isUpdating, isError, isSuccess },
  ] = usePutFormMutation()
    
  useEffect(() => {
    /* Check that we are ready to send the data */
    if(readyToSend) {
      sendForm(formData);
    }
  }, [formData, readyToSend]);
  
  useEffect(() => {
    if(isSuccess) {
      /* For some reason this does not trigger.. */
      console.log(data);
    }
  }, [isSuccess, data])
    
  const onSubmit: SubmitHandler<Inputs> = (data) => {
    /* Save page data to redux. There's already some data to be sent in the state. */
    dispatch(setFormData(data));
    /* Also need to set flag that we are ready with the forms */
    dispatch(setReadyToSend(true));
  };
    
  if(isUpdating) {
    return (<div>Wait a minute..</div>);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {isError && (<div>Error, try again!</div>)}
      <input defaultValue="eminem" {...register("name")} />
      <input type="submit" />
    </form>
  );
}