title: Selector data is loaded correctly from the redux store, but not displayed by the calling page component
body: <p>I have a page component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import ScansOverview from './scansOverview';
  import { loadPickingScans } from '../../actions';
  import { pickingScansSelector } from '../../selectors';
  
  class OrderPickingScansPage extends Component {
      componentDidMount(){
          const { loadPickingScans } = this.props;
          loadPickingScans(this.props.match.params.orderReference);
      }
  
      render() {
          const {pickingScans} = this.props;
          console.info("pickingScans", pickingScans);
  
          return (
              &lt;div&gt;
                  &lt;ScansOverview Scans={pickingScans}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = () =&gt; {
      const getPickingScansSelector = pickingScansSelector();
      return (state) =&gt; getPickingScansSelector(state);
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          loadPickingScans: () =&gt; dispatch(loadPickingScans())
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(OrderPickingScansPage);
  </code></pre>
  
  <p>That uses the <code>loadPickingScans</code> action to load the data it needs while consuming the <code>pickingScansSelector</code> selector to read it from store.</p>
  
  <pre><code>import { createSelector } from 'reselect'
  
  const getPickingScans = (state) =&gt; state.scanning.pickingScans || [];
  
  export const pickingScansSelector = () =&gt; createSelector(
      [getPickingScans],
      (pickingScans) =&gt; {
          console.info("pickingScans", pickingScans);
  
          return {
              pickingScans: [...pickingScans]
          }
      }
  );
  </code></pre>
  
  <p>That <code>console.info</code> logs the following data:</p>
  
  <p><a href="https://i.stack.imgur.com/QkabD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QkabD.png" alt="enter image description here"></a></p>
  
  <p>Which is what I expect.</p>
  
  <p><strong>The issue</strong></p>
  
  <p>Is that the data received from the selector is not connected to the actual page, although it is correctly loaded. The <code>console.info("pickingScans", pickingScans)</code> line logs an empty array -> Array []. This means that the ScansOverview dumb component has nothing to display.</p>
  
  <blockquote>
    <p>What do I need to do / fix so that the selector data is correctly
    passed to this.props?</p>
  </blockquote>
  
  <p>I must be missing something stupid ...</p>
  
  <p><strong>Update</strong></p>
  
  <p>I added a debugger statement to both <code>mapStateToProps</code> and <code>componentDidMount</code>. <code>mapStateToProps</code> is hit first, then <code>componentDidMount</code>, the former is not hit again although the selector correctly loads the data required.</p>