reactjs - REDUX/RTK クエリを使用してアイテムを削除した後にページを更新する方法は?

Question

このようにRTKクエリを使用してAPIからデータを取得しています

    export const coinApi = createApi({
  reducerPath: 'coinApi',
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCoins: builder.query({
      query: () => createRequest(`/watchlist`),
    })

  }),
});

そして、このようにテーブルからコインを削除しています

export const deleteCoin = (id) => async (dispatch, getState) => {


try {
    dispatch({
      type: COIN_DELETE_REQUEST,
    });

    await axios.delete(`/api/coins/watchlist/${id}`);

    dispatch({
      type: COIN_DELETE_SUCCESS,
    });
  } catch (error) {
    const message =
      error.response && error.response.data.message
        ? error.response.data.message
        : error.message;
    dispatch({
      type: COIN_DELETE_FAIL,
      payload: message,
    });
  }
};

私のフロントエンドコンポーネントでは、dispatch(deleteCoin(id)); を呼び出しています。

私のデータベースでは削除されていますが、コンポーネントは更新されないため、手動でページを更新しない限りコインは UI にまだ存在するため、削除機能は機能しています。

RTK クエリからグローバル データにアクセスしようとしましたが、正常にアクセスできませんでした。useEffect を使用して、依存データを

const { data, isFetching } = useGetCoinsQuery();

しかし、それでも私のコンポーネントをリロードしていませんか? 他にどのようにコンポーネントをリロードできますか? RTK クエリを使用するのはこれが初めてなので、そのデータに実際にアクセスする方法と、API サーバーでデータの変更をリッスンする方法がわかりません。ありがとう

 const coins = useSelector((state) => state.coinApi.queries)
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = coinDelete;

  useEffect(() => {}, [dispatch, successDelete, data]);

  if (isFetching) return <Loader></Loader>;

  const deleteHandler = (id) => {
    if (window.confirm('Are you sure?')) {
      dispatch(deleteCoin(id));

    }
  };