0

我正在使用这样的 RTK Query 从我的 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 { 数据，isFetching } = useGetCoinsQuery();

但是它仍然没有重新加载我的组件？我还能如何重新加载我的组件？这是我第一次使用 RTK Query，所以我不确定如何真正访问该数据以及它如何监听 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));

    }
  };
4

1 回答 1

3

通常，您可以使用providesTags和invalidatedTagswithing 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) {
于 2021-10-16T07:07:29.140 回答