最小化reselect Reactjs中的createSelector参数

Question

我在ReactJs代码中使用了reselect。下面是代码片段。由于文件很大，我省略了其中不必要的代码。

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需要两个参数:一个输入选择器数组作为第一个参数，一个函数作为第二个参数

在本例中，输入选择器数组为3。([todoSelector, searchTermSelector, searchViewSelector])

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

我怎样才能最小化输入选择器的数组，同时仍能让它按预期工作。我在网上搜索了很多，但我没有找到任何相关的东西。有什么建议吗？

Answer 1

如果想要减少每个选择器函数的参数数量，可以将逻辑分成多个部分，并将createSelector函数结果用作另一个createSelector函数的参数。如下所示：

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')));
  }
);
)