the code in product.jsx
the proplem is i want to update data but it doesnt work and i get this message in console Uncaught (in promise) TypeError: dispatch is not a function
export default function Product() {
const [user,setUser]=useState({});
const location = useLocation();
const productId = location.pathname.split("/")[2];
const [pStats, setPStats] = useState([]);
const product = useSelector((state) =>
state.product.products.find((product) => product._id === productId)
);
const handleChange =(e)=>{
const value=e.target.value;
setUser({
...user,
[e.target.name]:value
});
};
console.log(user)
const dispatch = useDispatch();
const handleclick=(id)=>{
updateProduct(id,dispatch,user)
console.log(id)
}
useEffect(() => {
updateProduct(dispatch);
}, [dispatch]);
const MONTHS = useMemo(
() => [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Agu",
"Sep",
"Oct",
"Nov",
"Dec",
],
[]
);
useEffect(() => {
const getStats = async () => {
try {
const res = await userRequest.get("order/income?pid=" + productId);
const list = res.data.sort((a,b)=>{
return a._id - b._id
})
list.map((item) =>
setPStats((prev) => [
...prev,
{ name: MONTHS[item._id - 1], Sales: item.total },
])
);
} catch (err) {
console.log(err);
}
};
getStats();
}, [productId, MONTHS]);
return (
<div className="product">
<div className="productTitleContainer">
<h1 className="productTitle">Product</h1>
<Link to="/newproduct">
<button className="productAddButton">Create</button>
</Link>
</div>
<div className="productTop">
<div className="productTopLeft">
<Chart data={pStats} dataKey="Sales" title="Sales Performance" />
</div>
<div className="productTopRight">
<div className="productInfoTop">
<img src={product.img} alt="" className="productInfoImg" />
<span className="productName">{product.title}</span>
</div>
<div className="productInfoBottom">
<div className="productInfoItem">
<span className="productInfoKey">id:</span>
<span className="productInfoValue">{product._id}</span>
</div>
<div className="productInfoItem">
<span className="productInfoKey">sales:</span>
<span className="productInfoValue">5123</span>
</div>
<div className="productInfoItem">
<span className="productInfoKey">in stock:</span>
<span className="productInfoValue">{product.inStock}</span>
</div>
</div>
</div>
</div>
<div className="productBottom">
<form className="productForm">
<div className="productFormLeft">
<label>Product Name</label>
<input type="text" placeholder={product.title} name="title" onChange={handleChange}/>
<label>Product Description</label>
<input type="text" placeholder={product.desc} name="desc" onChange={handleChange} />
<label>Price</label>
<input type="text" placeholder={product.price} name="price" onChange={handleChange} />
<label>In Stock</label>
<select name="inStock" id="idStock" onChange={handleChange}>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div className="productFormRight">
<div className="productUpload">
<img src={product.img} alt="" className="productUploadImg" />
<label for="file">
<Publish />
</label>
<input type="file" id="file" style={{ display: "none" }} name="img" onChange={handleChange} />
</div>
<button className="productButton" onClick={(e)=>handleclick(product._id)}>Update</button>
</div>
</form>
</div>
</div>
);
}
code in apicalls (redux)
import {
updateProductFailure,
updateProductStart,
updateProductSuccess,
} from "./productRedux";
export const updateProduct = async (id, product, dispatch) => {
dispatch(updateProductStart());
try {
const res=await userRequest.patch(`/products/find/${id}`,product)
dispatch(updateProductSuccess({ id, product }));
} catch (err) {
dispatch(updateProductFailure());
}
};
}
code in product redux
export const productSlice = createSlice({
name: "product",
initialState: {
products: [],
isFetching: false,
error: false,
},
reducers: {
updateProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
updateProductSuccess: (state, action) => {
state.isFetching = false;
state.products[
state.products.findIndex((item) => item._id === action.payload.id)
] = action.payload.product;
},
updateProductFailure: (state) => {
state.isFetching = false;
state.error = true;
},
}
i want to update my products by sending data from client to the api i think the proplem in the updateProductsucess function
