React.js：删除操作和刷新页面

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?

Answer 1

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