reduxjs/reselect

Type loss in `createSelector` with inline function declarations passed as separate arguments

aryaemami59 opened this issue · 0 comments

Overview

When using createSelector from Reselect, I've encountered a rare edge case affecting TypeScript type inference. This issue arises specifically when passing input selectors as separate inline arguments composed of inline function declarations.


Detailed Behavior

  • ✔️ Working Scenario 1: Input selectors as inline function declarations in a single array works fine.
  • ✔️ Working Scenario 2: Input selectors as function declarations passed as separate arguments, defined outside of createSelector works fine.
  • ❌ Problematic Scenario: Inline function declarations as separate arguments in createSelector cause TypeScript to resolve the parameter types of the result function to unknown.

Reproduction

Here are the different scenarios for clarity:

✔️ Scenario 1 - Works Fine:

const selectTodoIds = createSelector(
  [
    function selectTodos(state: RootState) {
      return state.todos;
    },
    function selectId(state: RootState, id: number) {
      return id;
    },
  ],
  (todos, id) => todos.map(todo => todo.id)
);

✔️ Scenario 2 - Works Fine:

function selectTodos(state: RootState) {
  return state.todos;
}

function selectId(state: RootState, id: number) {
  return id;
}

const selectTodoIds = createSelector(selectTodos, selectId, (todos, id) =>
  todos.map(todo => todo.id)
);

❌ Problematic Scenario - Result Function Loses its Types:

const selectTodoIds = createSelector(
  function selectTodos(state: RootState) {
    return state.todos;
  },
  function selectId(state: RootState, id: number) {
    return id;
  },
  (todos, id) => todos.map(todo => todo.id)
  // ❌ Here, both `todos` and `id` resolve to a type of `unknown`.
);

Impact

Although this situation may not happen very often and this issue may not be common, it's important to document for those who might encounter it.


Workarounds

Several simple workarounds include:

  1. Using arrow functions instead of inline function declarations.
  2. Grouping input selectors into a single array.
  3. Defining the function declarations outside of createSelector.

Either one of these methods solves the problem.


Conclusion

This might be one of those issues that might eventually just go away as TypeScript gets better, but documenting it with potential workarounds can assist others potentially facing similar challenges.