Redux-toolkit: No effect when deleting an item - reactjs

Question

I have a project and in this project I have several salaries and I am trying to delete a salary, but no action has taken place, and I have no effect on the network,
How can I solve the problem?
I think the error is in the receipt file below
This file contains the delete function of Salary
receipt.js:
import { createSlice, createAsyncThunk } from "#reduxjs/toolkit";
import axios from "axios";
export const getReceipt = createAsyncThunk(
"Receipts/getReceipt",
async (params) => {
console.log("idddd: ", params);
const response = await axios.get(`/financial/receipts/${params}`);
console.log("url: ", "/financial/receipts/", params);
console.log("resss: ", response);
const data = response.data.data;
console.log("reddddd: ", data);
// return data === undefined ? null : data;
return data;
}
);
export const removeDeduction = createAsyncThunk(
"Receipts/removeDeduction",
async (receiptId, id, { dispatch, getState }) => {
console.log("receipt Id: ", receiptId);
console.log("deduction Id: ", id);
const response = await axios.delete(
`/financial/receipts/${receiptId}/deductions/${id}`
);
dispatch(getReceipt());
return response.data;
}
);
export const removeSalary = createAsyncThunk(
"Receipts/removeSalary",
async (receiptId, id, { dispatch, getState }) => {
console.log("receipt Id: ", receiptId);
console.log("deduction Id: ", id);
const response = await axios.delete(
`/financial/receipts/${receiptId}/salaries/${id}`
);
dispatch(getReceipt());
console.log("response delete: ", response.data);
return response.data;
}
);
const receiptSlice = createSlice({
name: "eCommerceApp/receipt",
initialState: null,
reducers: {},
extraReducers: {
[getReceipt.fulfilled]: (state, action) => action.payload,
[removeDeduction.fulfilled]: (state, action) => null,
[removeSalary.fulfilled]: (state, action) => null,
},
});
export default receiptSlice.reducer;
This file contains the entire code, and inside it, the function to delete a salary was called
ReceiptDetails.js:
import Avatar from "#material-ui/core/Avatar";
import Icon from "#material-ui/core/Icon";
import Tooltip from "#material-ui/core/Tooltip";
import Typography from "#material-ui/core/Typography";
import { useState } from "react";
import { useSelector } from "react-redux";
import IconButton from "#material-ui/core/IconButton";
import { removeDeduction, removeSalary } from "../../store/receiptSlice";
import { useDispatch } from "react-redux";
import { Link, useHistory } from "react-router-dom";
function ReceiptDetailsTab() {
const order = useSelector(({ eCommerceApp }) => eCommerceApp.receipt);
const dispatch = useDispatch();
const [map, setMap] = useState("shipping");
const history = useHistory();
function handleRemoveDeduction() {
dispatch(removeDeduction()).then(() => {
history.push("/apps/e-commerce/orders/1");
});
}
function handleRemoveSalary() {
dispatch(removeSalary());
}
return (
<div>
<div className="pb-48">
<div className="pb-16 flex items-center">
<Icon color="action">account_circle</Icon>
<Typography className="h2 mx-12 font-medium" color="textSecondary">
User
</Typography>
</div>
<div className="mb-24">
<div className="table-responsive mb-48">
<table className="simple">
<thead>
<tr>
<th>
<Typography className="font-semibold">Name</Typography>
</th>
<th>
<Typography className="font-semibold">Email</Typography>
</th>
<th>
<Typography className="font-semibold">Phone</Typography>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="flex items-center">
{/* <Avatar src={order.user.avatar} /> */}
<Avatar src="assets/images/avatars/Lily.jpg" />
<Typography className="truncate mx-8">
{/* {`${order.customer.firstName} ${order.customer.lastName}`} */}
Samara Kamal
</Typography>
</div>
</td>
<td>
<Typography className="truncate">
{/* {order.customer.email} */}
samara#gmail.com
</Typography>
</td>
<td>
<Typography className="truncate">
{/* {order.customer.phone} */}
0947483381
</Typography>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="pb-48">
<div className="pb-16 flex items-center">
<Icon color="action">attach_money</Icon>
<Typography className="h2 mx-12 font-medium" color="textSecondary">
Salary
</Typography>
</div>
<div className="table-responsive">
<table className="simple">
<thead>
<tr>
<th>
<Typography className="font-semibold">Amount</Typography>
</th>
<th>
<Typography className="font-semibold">
Work Start Date
</Typography>
</th>
<th>
<Typography className="font-semibold">
Work End Date
</Typography>
</th>
<th>
<Typography className="font-semibold">Bonus</Typography>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>£</span>
<span className="truncate">{order.salary.amount}</span>
</td>
<td>
<span className="truncate">{order.salary.workStartDate}</span>
</td>
<td>
<span className="truncate">{order.salary.workEndDate}</span>
</td>
<td>
<span>£</span>
<span className="truncate">{order.salary.bonus}</span>
</td>
<td>
<IconButton
onClick={handleRemoveSalary}
style={{
color: "red",
border: "none",
marginLeft: "5rem",
}}
>
<Icon>delete</Icon>
</IconButton>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="pb-48">
<div className="pb-16 flex items-center">
<Icon color="action">moneyOff</Icon>
<Typography className="h2 mx-12 font-medium" color="textSecondary">
Deductions
</Typography>
</div>
<div className="table-responsive">
<table className="simple">
<thead>
<tr>
<th>
<Typography className="font-semibold">Amount</Typography>
</th>
<th>
<Typography className="font-semibold">Type</Typography>
</th>
<th>
<Typography className="font-semibold">Reason</Typography>
</th>
</tr>
</thead>
<tbody>
{order.deductions.map((deduction) => (
<tr key={deduction.id}>
<td>
<span>£</span>
<span className="truncate">{deduction.amount}</span>
</td>
<td>
<span className="truncate">{deduction.type}</span>
</td>
<td>
<span className="truncate">{deduction.reason}</span>
</td>
<td>
<IconButton
onClick={handleRemoveDeduction}
style={{ color: "red", border: "none" }}
>
<Icon>delete</Icon>
</IconButton>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}
export default ReceiptDetailsTab;

Answer 1

Issue
You don't have parameters in the function when you call it
Solve
export const removeDeduction = createAsyncThunk(
"Receipts/removeDeduction",
async (params, { dispatch, getState }) => {
console.log("receipt Id: ", params.receiptId);
console.log("deduction Id: ", params.id);
const response = await axios.delete(
`/financial/receipts/${params.receiptId}/deductions/${params.id}`
);
dispatch(getReceipt());
return response.data;
}
);
function handleRemoveDeduction() {
const params = {
receiptId: '',
id: ''
}
dispatch(removeDeduction(params)).then(() => {
history.push("/apps/e-commerce/orders/1");
});
}