React.js: Delete operation and refresh page

Question

I have implemented a delete operation. When this is done I make a redirect on the main page but I would like it to be automatically updated instead I have to update it again (calling a getEntities to get the values back)

reducer.ts

export const getEntities = createAsyncThunk('services/getEntities', async (param: parameters) => {
  const requestUrl = `${apiUrl}${param.sortParam ? `?page=${param.pageParam}&size=${20}&sort=${param.sortParam}` : ''}`;
  const response = await axios.get<any>(requestUrl);
  return response;
});

export const deleteEntity = createAsyncThunk('services/deleteEntity', async (id: any) => {
  const response = await axios.delete<any>(`${apiUrl}/${id}`);
  return response;
})

deletePage.tsx

const handleClose = () => {
        props.history.push('/service');
    };


    const confirmDelete = () => {
        dispatch(deleteEntity(property.entity.id))
            .then((resp: any) => {
                if (resp.payload.status === 204) {
                    handleClose();
                }
            })
    };

So in my "service" page I have to call getEntities again to get the updated list (without the deleted element).

In your opinion How can I do to avoid having to manually call getEntities after deletion?

Why do you have to call getEntities rather than removing the entity locally? Redux thunks allow you to dispatch updates to the store — nanobar
– nanobar, Commented Jan 26, 2022 at 11:28
Because The deleted element remains visible until I call the getEntities — Jack23
– Jack23, Commented Jan 26, 2022 at 11:32

Steve -Cutter- Blades · Accepted Answer · 2022-01-26 11:36:49Z

1

By your props I'm guessing you're using react-router. To refresh a route you would use history.go(0).

answered Jan 26, 2022 at 11:36

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack23 Over a year ago

I tried what you suggest and it is a good solution :) I had thought of calling the getEntities to update only the content

Collectives™ on Stack Overflow

React.js: Delete operation and refresh page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related