title: How to make a redux connected react component listen to actions dispatched outside of react
body: <p>I've got an actions file</p>
  
  <pre><code>import keyMirror from 'keymirror';
  
  export const actionTypes = keyMirror({
   OPEN_LIGHTBOX: null,
   CLOSED_LIGHTBOX: null
  });
  
  export const openLightbox = (closable = false) =&gt; ({
   type: 'OPEN_LIGHTBOX',
   payload: {lightboxOpen: true, lightboxClosable: closable}
  });
  </code></pre>
  
  <p>and a reducer, I'm not going to put the code in here because it doesn't seem necessary. It is at any rate working. </p>
  
  <p>I have a react component that says</p>
  
  <pre><code>module.exports = connect((state) =&gt; {
      console.log('state change'); // eslint-disable-line no-console
      console.log(state); // eslint-disable-line no-console
      return {
        findShopDomainData: state.findShopDomain
      }
    })(Autocomplete);
  </code></pre>
  
  <p>I can register state changes inside of the react component, I get the console log statements. </p>
  
  <p>But I also have stuff outside of react that needs to call these redux actions. So I import into a JS file.</p>
  
  <pre><code>import { createStore } from 'redux';
  import { findShopDomain } from 'path to reducer file happens here'
  import { openLightbox } from  'path to action file'
  </code></pre>
  
  <p>then I</p>
  
  <pre><code>let reduxStore = createStore(findShopDomain);
  reduxStore.dispatch(openLightbox(true));
  </code></pre>
  
  <p>If I do that action in my vanilla js file I get to the reducer, but the state change is never registered in my connected React Component. I'm supposing it's because the connect function probably turns it into a new reducer, and in essence I actually have two reducers siting around that won't be affecting each other. </p>
  
  <p>At any rate I would really like some way to have reduxStore.dispatch(openLightbox(true)); in my vanilla js be registered by my react component.</p>