如何使用 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));

    }
  };

Answer 1

通常，您可以使用RTK-QueryprovidesTags并invalidatedTags与 RTK-Query 一起使用，以使相关查询在运行突变后自动重新获取。就您而言，您的delete不是突变，但您仍然可以使用该机制。

从长远来看，我会鼓励您对delete此处的操作进行更改，因为您在那里做的越多，RTK-Query 的工作效果就会越好 - 而且您不必手动编写所有代码。

  baseQuery: fetchBaseQuery({ baseUrl }),
  tagTypes: ['Coins'],
  endpoints: (builder) => ({
    getCoins: builder.query({
      query: () => createRequest(`/watchlist`),
      providesTags: [ 'Coins' ]
    })

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

    dispatch({
      type: COIN_DELETE_SUCCESS,
    });
    dispatch(api.util.invalidateTags(['Coins'])) // this will refetch all queries that "provide" the tag `"Coins"`
  } catch (error) {