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

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} */}
                      [email protected]
                    </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;

CodePudding user response：

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");
  });
}