将选定筛选器与URL参数同步

Question

我正在构建一个简单的实体分页列表，支持使用ReactJS的动态过滤器。数据是在react查询库的帮助下从RESTful API层获取的。它在服务器上进行分页和筛选。所选过滤器需要存储在URL的查询参数中，以便在刷新页面时恢复。我正在努力寻找最干净的方法，将过滤器的状态与当前URL同步。我不想引入其他依赖项，如React Router，但我已经在应用程序中使用了redux。但是，我不想在redux存储中复制URL状态。

组件结构及其道具如下所示（为便于提问而简化）：

过滤器

此组件在UI中呈现过滤器，这些过滤器随dropDownFilters prop提供。它支持对每个过滤器进行多选。它需要以下道具：

selectedFiltersIds: { [k: string]: string[] };
setSelectedFiltersIds: (selected: { [k: string]: string[] }) => void;
dropdownFilters: FilterDropdownType[];

带有两个预选过滤器的selectedFiltersIds示例：

{
 locations: [1,4,5],
 zones: [3,2]
}

另一个组件List获取列表数据：

export const List: React.FC = ({ selectedFiltersIds }) => {
  const listData = useListData(page, { ...selectedFiltersIds });
  return <>{listData.data.items.map((i, index) => (
      <div key={i.id}>
        <Card {...i} />
      </div>
    ))}</>
}

列表父项：

const ListParent: React.FC = () => {
  const filtersData = useFilters();
  
  const dropdownFilters = useMemo(() => {
      return filtersData?.data?.groups
        .map((f: any) => ({
          ...f,
          items: f.items.map((i: any) => ({ name: i.name, val: i })),
        }));
  }, [brandFiltersData]);
  
  const [selectedFiltersIds, setSelectedFiltersIds] = useState<{
    [k: string]: string[];
  }>({}); // this needs to be synchronized with the query params in the browser's URL
  
  if (filtersData.isLoading) {
    return <LoadingScreen />;
  }
  
  return (
    <main>
      <FilterBar
        selectedFiltersIds={selectedFiltersIds}
        setSelectedFiltersIds={setSelectedFiltersIds}
        dropdownFilters={dropdownFilters}
      />
      <List selectedFiltersIds={selectedFiltersIds} />
    </main>
  );
};

export default ListParent;

我不知道什么是最好的方法来移动选择的筛选器从ListP的内部状态，并使其与URL状态同步。我不想为这个特殊的案件保留两个真相来源。

Answer 1

似乎UseQueryParams库提供了一种简单而干净的方法来解决这个问题。它支持查询参数的双向绑定，而不需要React路由器（例如repo）或redux。