now everything works with React ToolKit

client/src/components/profile-forms/AddExperience.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { addExperience } from '../../actions/profile';
 
-const AddExperience = ({ addExperience }) => {
+const AddExperience = () => {
+  const dispatch = useDispatch();
   const navigate = useNavigate();
   const [formData, setFormData] = useState({
     company: '',
@@ -31,9 +31,9 @@ const AddExperience = ({ addExperience }) => {
       <small>* = required field</small>
       <form
         className="form"
-        onSubmit={(e) => {
+        onSubmit={async(e) => {
           e.preventDefault();
-          addExperience(formData).then(() => navigate('/dashboard'));
+          await dispatch(addExperience(formData)).then(() => navigate('/dashboard'));
         }}
       >
         <div className="form-group">
@@ -112,8 +112,4 @@ const AddExperience = ({ addExperience }) => {
   );
 };
 
-AddExperience.propTypes = {
-  addExperience: PropTypes.func.isRequired
-};
-
-export default connect(null, { addExperience })(AddExperience);
+export default AddExperience;