Post Data With Redux and Fetch API with Axios Get Error Result so Looping Response Pending

Question

I'm creating a form to input data, then I'm having problems creating posts when calling data that is integrated with redux, I fetch API with Axios and I've put it in action.

When I run, I get a pending response while checking it on the network. This causes my laptop to crash. Maybe you can help with the problems I'm having, thank you.

createform.js

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTransaction, getListTransaction } from "../actions/TransactionAction.js";

export default function CreateTransaction() {
  const [customer, setCustomer] = useState("");
  const [income, setIncome] = useState("");
  const [sold, setSold] = useState("");
  const [id, setId] = useState("");
  const dispatch = useDispatch();
  const addTransactionResult = useSelector((state) => state.TransactionReducer);

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(
      addTransaction({
        customer: customer,
        income: income,
        sold: sold,
      })
    );
  };

  useEffect(() => {
    if (addTransactionResult) {
      dispatch(addTransaction());
      setCustomer("");
      setIncome("");
      setSold("");
    }
  }, [addTransactionResult, dispatch]);

  return (
    <div className="antialiased">
      <p className="font-bold text-base mb-3">Create Transaction</p>
      <form>
        <input
          className="form-input block w-max outline-none p-1 my-1 border"
          placeholder="name customer"
          type="text"
          value={customer}
          onChange={(e) => setCustomer(e.target.value)}
        />
        <input
          className="form-input block w-max outline-none p-1 my-1 border"
          placeholder="Income"
          type="number"
          value={income}
          onChange={(e) => setIncome(e.target.value)}
        />
        <input
          className="form-input block w-max outline-none p-1 my-1 border"
          placeholder="Sold Out"
          type="number"
          value={sold}
          onChange={(e) => setSold(e.target.value)}
        />
        <button
          type="submit"
          className="rounded-lg my-4 w-32 text-white text-lg font-bold bg-sky-600 hover:bg-sky-700"
          onClick={(e) => handleSubmit(e)}
        >
          Create
        </button>
      </form>
    </div>
  );
}

action.js

import axios from "axios";

export const ADD_TRANSACTION = "ADD_TRANSACTION";

export const addTransaction = (data) => {
  return (dispatch) => {
    dispatch({
      type: ADD_TRANSACTION,
      payload: {
        loading: true,
        data: false,
        errorMessage: false,
      },
    });

    axios({
      method: "POST",
      url: "https://my-json-server.typicode.com/fuad-zein/DB-Dashboard-json/order",
      timeout: 120000,
      data: data,
    })
      .then((response) => {
        dispatch({
          type: ADD_TRANSACTION,
          payload: {
            loading: false,
            data: response.data,
            errorMessage: false,
          },
        });
      })
      .catch((error) => {
        dispatch({
          type: ADD_TRANSACTION,
          payload: {
            loading: false,
            data: false,
            errorMessage: error.message,
          },
        });
      });
  };
};

reduce.js

import {
  ADD_TRANSACTION,
} from "../../actions/TransactionAction";

const initialState = {
  addTransactionResult: false,
  addTransactionLoading: false,
  addTransactionError: false,
};

const TransactionReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TRANSACTION:
      return {
        ...state,
        addTransactionResult: action.payload.data,
        addTransactionLoading: action.payload.loading,
        addTransactionError: action.payload.errorMessage,
      };
    default:
      return state;
  }
};

export default TransactionReducer;

This is the result when I run my post system.

Answer 1

You can change your dependency in your useUffect by get your list to get data:

useEffect(() => {
  if (addTransactionResult) {
    dispatch(addTransaction());
    setCustomer("");
    setIncome("");
    setSold("");
  }
}, [getListTransaction, dispatch]);

Answer 2

Just replace your onClick with this:

<button
  type="submit"
  className="rounded-lg my-4 w-32 text-white text-lg font-bold bg-sky-600 hover:bg-sky-700"
  onClick={handleSubmit}
>