title: ReactJS + Redux, getting error "Failed prop type: Right-hand side of 'instanceof' is not callable"
body: <p>I'm helping develop a web app in React and we're using Redux for global state control.</p>
  
  <p>What I don't understand is why are we getting these warnings on the browser console? What is needed to make it go away? It looks like something's wrong when declaring the prop types but I can't figure out how to do it properly.</p>
  
  <p>Below is the warning plus the relevant code, simplified for brevity.</p>
  
  <hr>
  
  <p><strong>Browser console</strong></p>
  
  <pre><code>Warning: Failed prop type: Right-hand side of 'instanceof' is not callable
      in SearchBar (created by ConnectFunction)
      in ConnectFunction (created by Body)
      in div (created by Header)
      in div (created by Header)
      in div (created by Header)
      in Header (created by Body)
      in div (created by Body)
      in div (created by Body)
      in Body (created by Context.Consumer)
      in Route (created by AuthenticatedRoute)
      in AuthenticatedRoute (created by App)
      in Switch (created by App)
      in Router (created by HashRouter)
      in HashRouter (created by App)
      in StrictMode (created by App)
      in App
      in Provider
  </code></pre>
  
  <hr>
  
  <p><strong>SearchBar.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  import * as SearchBarActions from './redux/actions';
  
  const SearchBar = props =&gt; {
    const handleSearch = () =&gt; {
      [some code here]
    };
  
    return (
      &lt;div className="searchbar w-100 my-2"&gt;
        &lt;div className="input-group"&gt;
          &lt;input
            id="searchBar"
            name="searchBar"
            type="text"
            className="form-control rounded"
            aria-describedby="button-main-search"
          /&gt;
          &lt;button
            type="button"
            className="btn btn-lg fas fa-search text-light pl-3"
            id="button-main-search"
            onClick={handleSearch}
          &gt;
            &lt;span className="sr-only"&gt;Search&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  SearchBar.propTypes = {
    actions: PropTypes.instanceOf(SearchBarActions),
  };
  
  SearchBar.defaultProps = {};
  
  export default connect(null, dispatch =&gt; ({
    actions: bindActionCreators(SearchBarActions, dispatch),
  }))(SearchBar);
  </code></pre>
  
  <hr>
  
  <p><strong>redux/actions</strong></p>
  
  <pre><code>import * as CONSTANTS from './constants';
  
  export const addSearchLogs = searchLogs =&gt; {
    return {
      type: CONSTANTS.ADD_SEARCH_LOGS,
      searchLogs,
    };
  };
  
  export const clearSearchLogs = () =&gt; {
    return {
      type: CONSTANTS.CLEAR_SEARCH_LOGS,
    };
  };
  </code></pre>
  
  <hr>
  
  <p><strong>constants</strong></p>
  
  <pre><code>export const ADD_SEARCH_LOGS = 'ADD_SEARCH_LOGS';
  export const CLEAR_SEARCH_LOGS = 'CLEAR_SEARCH_LOGS';
  </code></pre>