在重新选择 Reactjs 中最小化 createSelector 的参数

Question

我在我的 ReactJs 代码中使用了重新选择。 这是代码片段。 由于文件大，我从中省略了不必要的代码。

import { createSelector } from 'reselect';

const todoSelector = state => state.todo.todos;
const searchTermSelector = state => state.todo.searchTerm;
const searchViewSelector = state => state.todo.userView

export const filteredTodos = createSelector(
  [todoSelector, searchTermSelector, searchViewSelector],
  (todos, searchTerm, searchView) => {
    return todos.filter(todo => todo.title.match(new RegExp(searchTerm, 'i')));
  }
);

您可以注意到createSelector的参数。 我们知道createSelector需要 2 个 arguments：输入选择器数组作为第一个参数，function 作为第二个参数

在这种情况下，输入选择器数组为 3。（ [todoSelector, searchTermSelector, searchViewSelector] ）

但在我的实际代码中，输入选择器数组是 9。由于声纳问题，我需要将计数从 9 减少到小于 4。

如何最小化输入选择器数组并使其按预期工作。 我在网上搜索了很多，但我没有找到任何与之相关的 ifno。 请问有什么建议吗？

Answer 1

如果您想减少每个选择器函数的 arguments 的数量，您可以将逻辑分成多个部分并使用 createSelector function 结果作为另一个 createSelector function 的参数。 像这样的东西：

const todoSelector = state => state.todo.todos;
const searchTermSelector = state => state.todo.searchTerm;
const searchViewSelector = state => state.todo.userView

export const filteredTodosByTerm = createSelector(
  [todoSelector, searchTermSelector],
  (todos, searchTerm) => {
    return todos.filter(todo => todo.title.match(new RegExp(searchTerm, 'i')));
  }
);

export const filteredTodosByView = createSelector(
  [filteredTodosByTerm, searchViewSelector],
  (todos, searchView) => {
    return todos.filter(todo => todo.title.match(new RegExp(searchView, 'i')));
  }
);
)