Redux 工具包通过按钮操作进行查询

Question

我正在使用 Redux Toolkit（React Native）和

useGetGenreMoviesQuery

钩子在页面加载时获取电影。

const { data, isLoading, error } = useGetGenreMoviesQuery(page);

现在，我想在按下按钮时触发相同的 API 调用。然而，当我尝试解构按下按钮的

useGetGenreMoviesQuery

钩子时：

const [getMovies, { data, isLoading, error }] = useGetGenreMoviesQuery(page);

我收到错误：

'TypeError：解构不可迭代实例的尝试无效。为了可迭代，非数组对象必须具有 Symbol.iterator 方法。'

在这种情况下如何通过按下按钮正确进行 API 调用？

我尝试删除 const 数组，并尝试使用 redux 工具包中的 refetch 来调用相同的 API。

const { data, isLoading, error, refetch } = useGetGenreMoviesQuery(page);

但是它不起作用。

我必须在用户交互时再次调用 API

Answer 1

我相信

refetch

函数应该可以在这种情况下工作，但是由于某些UI事件或回调而实现查询调用的更传统方法是使用Lazy Query。惰性查询挂钩 do 返回一个包含触发函数和结果的数组。

从 API 切片中导出生成的

useLazyGetGenreMoviesQuery

挂钩，并在按钮的

onClick

回调处理程序中调用触发函数。

...

const [
  getMovies,
  { data, isLoading, error }
] = useLazyGetGenreMoviesQuery();

...

const clickHandler = async (page) => {
  try {
    const result = await getMovies(page).unwrap();
    // success, any additional logic
  } catch(error) {
    // failure
  }
}

...

<button type="button" onClick={clickHandler}>
  Get Movies
</button>

...