carform submit

cars/src/components/CarForm.js

@@ -1,5 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
-import { changeCost, changeName } from "../store";
+import { addCar, changeCost, changeName } from "../store";
+import { reset } from "../store/slices/formSlice";
 
 function CarForm() {
   const dispatch = useDispatch();
@@ -14,10 +15,16 @@ function CarForm() {
     dispatch(changeCost(carCost));
   };
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    dispatch(addCar({ name, cost }));
+    dispatch(reset());
+  };
+
   return (
     <div className="car-form panel">
       <h4 className="subtitle is-3">Add Car</h4>
-      <form>
+      <form onSubmit={handleSubmit}>
         <div className="field-group">
           <div className="field">
             <label className="label">Name</label>
@@ -38,6 +45,9 @@ function CarForm() {
             />
           </div>
         </div>
+        <div className="field">
+          <button className="button is-link">Submit</button>
+        </div>
       </form>
     </div>
   );

cars/src/store/slices/formSlice.js

@@ -1,20 +1,24 @@
 import { createSlice } from "@reduxjs/toolkit";
+const initialState = {
+  name: "",
+  cost: 0,
+};
 
 const formSlice = createSlice({
   name: "form",
-  initialState: {
-    name: "",
-    cost: 0,
-  },
+  initialState,
   reducers: {
     changeName(state, action) {
       state.name = action.payload;
     },
     changeCost(state, action) {
       state.cost = action.payload;
     },
+    reset(state, action) {
+      return initialState;
+    },
   },
 });
 
-export const { changeCost, changeName } = formSlice.actions;
+export const { changeCost, changeName, reset } = formSlice.actions;
 export const formReducer = formSlice.reducer;