在重新選擇 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')));
  }
);
)