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,
});
}
};

和在我的前端组件:我调用调度(deleteCoin(id));

删除功能正在工作，因为在我的数据库中它被删除了，但是组件不刷新，所以硬币仍然存在于UI上，除非我手动刷新页面。

我已经尝试从RTK查询访问全局数据，但不能成功我试图使用useEffect并从

传递依赖数据const {data, is抓取}= 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-Query中使用providesTags和invalidatedTags，以便在运行突变后自动重新获取相关查询。在你的例子中，你的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) {

Answer 2

您应该阅读这个示例https://redux-toolkit.js.org/rtk-query/usage/examples。注意provideTags和invalidatesTags

Answer 3

重取的一般方法:

const MyComponent = () =>{

const { refetch, data, error, isFetching} = useGetGithubByNameQuery();

const toRender = error ? (
<p>Oh no, there was an error</p>
) : isFetching ? (
<p>"Loading..."</p>
) : data ? (
data.map((item)=>{return <p>item.toString()</p>})
) : null;

return(
<>
{toRender}
<button onClick={refetch}>Refresh</button>
</>
)
}