When I dispatch my updateWorker and send it the required parameters "id, data" The data gets changed when the updateWorker takes it,as shown in the picture I printed the data before I sent it("dispatch(updateWorker(id, data)") and when I received them at updateWorker

My handelSubmit function triggers the dispatch

const handleSubmit = async (event) => {
    event.preventDefault();
    if (id) {
        const d = {
            name: data.name,
            email: data.email,
            phoneNumber: data.phoneNumber
        }
        console.log("Sent Parameters at Update Worker: ");
        console.log("id: ", id);
        console.log("data: ", d);
        dispatch(updateWorker(id, d));
    } else {
        if (validate()) {
            dispatch(createWorker(data))
        }
        else {
            setMessage("Double Check your inputs!");
        }
    }
};

My updateWorker function:

export const updateWorker = createAsyncThunk("workers/updateWorker", (id, data) => {
console.log("Recived Parameters at Update Worker: ");
console.log("id: ", id);
console.log("data: ", data);
return axios
    .put(`/api/workers/${id}`, data)
    .then(response => {
        console.log(response);
        const { message } = response.data;
        return message;
    });
})

CodePudding user response：

You should send id and data as one parameter,

const payLoad = {
            name: data.name,
            email: data.email,
            phoneNumber: data.phoneNumber
        }
       dispatch(updateWorker({id, payLoad}));

Receive and get values by destructuring as,

export const updateWorker =   createAsyncThunk("workers/updateWorker", (requestObj) => {
    const {id, payLoad} = requestObj;
    return axios
        .put(`/api/workers/${id}`, payLoad)
        .then(response => {
            console.log(response);
            const { message } = response.data;
            return message;
        });
    })