Skip to main content

use_paginated

Function use_paginated 

Source
pub fn use_paginated<T, P, F, Fut, E>(
    page: P,
    per_page: i32,
    fetch: F,
) -> PaginatedState<T>
where T: Clone + Send + Sync + 'static, P: Fn() -> i32 + Send + Sync + 'static, F: Fn(i32, i32) -> Fut + Send + Sync + 'static, Fut: Future<Output = Result<(Vec<T>, i64), E>> + 'static, E: Display + 'static,
Expand description

分页列表加载 hook。

  • page:返回当前页码的闭包,在 Effect 内调用,其读取的信号被追踪 (变化时自动重新加载)。
  • per_page:每页条数。
  • fetch:接收 (page, per_page),返回 Future<Output = Result<(Vec<T>, i64), E>>。 E: Display 用于把错误写入 error 信号;ApiError 请先经 crate::utils::error::failure_message 映射成可读文案(UI 不得直接展示 err.to_string())。fetch 在 Effect 内同步调用(返回 Future 之前的部分), 因此构造请求参数时读取的信号(筛选条件等)同样被追踪;async 块内的读取不追踪。 fetch 与 page 都要求 Send + Sync + 'static,捕获的信号都是 Copy 句柄, 满足该要求;Future 本身在浏览器本地执行,无需 Send。

仅在浏览器(Effect 运行时)发起请求,服务端不请求;快速翻页/切筛选时, 只有最后一次请求的响应能落地。

§例

ⓘ
let state = use_paginated(
    move || current_page.get(),
    POSTS_PER_PAGE,
    move |p, pp| {
        let query = build_query(); // 同步读信号:被追踪
        async move {
            list_posts(p, pp, query).await
                .map(|r| (r.posts, r.total))
                .map_err(|e| failure_message("加载文章", &e))
        }
    },
);
let (posts, loading) = (state.items, state.loading);