Search code examples
javascriptreduxstorereselect

How to resolve uncaught error createSelector method?


I'm using a selector in my Angular app but get an uncaught error calling the selector. Although I've supplied required selector functions as params to createSelector. According to the re-select docs here - https://github.com/reduxjs/reselect

Uncaught Error: Selector creators expect all input-selectors to be functions, 
instead received the following types: [object]

I did find a similar issue here which suggests changing the selector from arrow function to plain function declarations would fix it. In order to resolve any hoisting issues with the function declarations but this doesn't resolve the uncaught error - https://github.com/reduxjs/reselect/issues/169

The selector is invoked by passing in store.getState() as a parameter:

let state = getBookTitles(this.store.getState());

Question:

How can you resolve uncaught error when calling a re-select's createSelector?

This is my Selectors.js file that contains the app state selectors:

// Selectors.js

import { createSelector } from 'reselect';

function selectBooks(state: any) {
  return state ? state.books: [];
}
function selectBookTitles(books: any) {
  return books ? books.titles: [];
}

// bookTitle selector
export let getBookTitles = createSelector(
  selectBooks,
  selectBookTitles,
);

Solution

  • Turns out the error was coming from an incorrectly defined selector in the selector.js file.

    Error:

    Uncaught Error: Selector creators expect all input-selectors to be functions, 
    instead received the following types: [object]
    

    Incorrect syntax:

    export const selectConfig = createSelector(
      [initialSettingsState.config],
      'config',
    );
    

    Correct Syntax:

    const configSelector = state => {
      return state ? state.config: [];
    };
    
    export const getConfig = createSelector(
      configSelector,
      config=> {
        return config;
      },
    );