是否可以使用 reselect 重写选择器？

Question

我在我的项目中使用了 redux 工具包。我的选择器如下所示：

export const selectFilterCinemas = (state) =>
    state.filmSlice.cinemas.filter(
        (cinema) =>
            cinema.name.toLowerCase().includes(state.filmSlice.search.toLowerCase()) ||
            cinema.address.toLowerCase().includes(state.filmSlice.search.toLowerCase())
    )

是否可以使用 reselect 重写我的选择器以及如何重写？

Answer 1

是的。你需要使用Reselect中的createSelector API，通过“输入选择器”提取你需要的那几条数据，然后在输出函数中推导出实际结果：

const selectFilterCinemas = createSelector(
  (state) => state.filmSlice.cinemas,
  (state) => state.filmSlice.search,
  (cinemas, search) => {
    const lowerSearch = search.toLowerCase();
    return cinemas.filter(cinema => {
      return cinema.name.toLowerCase().includes(lowerSearch) ||
              cinema.address.toLowerCase().includes(lowerSearch);
    })
  }
)

如果 cinemas 或 search 发生变化，过滤将仅 re-run。

另请参阅 Deriving Data With Selectors 上的 Redux 文档页面。

是否可以使用 reselect 重写选择器？

Is it possible to rewrite selectors using reselect?

reactjs

redux

redux-toolkit

reselect