title: calling store.dispatch from html button external to components
body: <p>On my screen I have two columns, the left hand column is a list of transations, the right hand column shows details of the last transaction you clicked on in the list on the left.</p>
  
  <p>The details are populated in response to a redux action ONE_TRANS_LOAD_DETAILS</p>
  
  <p>I generate the list on the left using html, without using React. I want to add an onClick event to dispatch an action with type='ONE_TRANS_LOAD_DETAILS'.</p>
  
  <p>I could do this IF the left hand list was also a rect component, but am having trouble getting access to the store to call the store.dispatch({type:'ONE_TRANS_LOAD_DETAILS', transId: 55});</p>
  
  <p>In my html list on the left, I have <code>&lt;div class='row' onClick="store.dispatch({ type: 'ONE_TRANS_LOAD_DETAILS',transId: {{ $trans-&gt;id }} }))"&gt;</code> (I am using laravel with a blade template to generate this html)</p>
  
  <p>I have set the store as an export in my application root code (footer.js):</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  import reducer from './reducer';
  import TransDetails from "./components/TransDetails";
  export const store = createStore(reducer);
  require('./components/Allocations.js');
  
  if (document.getElementById('allocations')) {
      render(
          &lt;Provider store={store}&gt;
              &lt;TransDetails /&gt;
          &lt;/Provider&gt;,
          document.getElementById('allocations')
      );
  }
  </code></pre>
  
  <p>So how to ensure <code>store</code> is set to the redux store available to the html list on the left?</p>
  
  <p>I have tried:</p>
  
  <p>1) putting the export in the javascript file named 'money.js' that webpack builds for me and I import in the html header thus: <code>&lt;script src="js/money.js"&gt;&lt;/script&gt;</code>
  money.js:</p>
  
  <pre><code>require('./bootstrap');
  import { store } from './footer.js';
  </code></pre>
  
  <p>but I get 'store is not defined' when I try and use it in the html list</p>
  
  <p>2) SO I tried a script tag in the body:</p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  import { store } from './footer.js';
  &lt;/script&gt;
  ...
  </code></pre>
  
  <p>but I get 'SyntaxError: Unexpected token {' at the import { store } line</p>
  
  <p>3) I have tried putting the import in the head:</p>
  
  <pre><code>&lt;script&gt;
  import { store } from './footer.js';
  &lt;/script&gt;
  </code></pre>
  
  <p>But I also get unexpected token error.</p>
  
  <p>4) (Thanks @MTCoatser) I made accessStore be processed by webpack to ensure compatibility:
  New javascript file storeAccess:</p>
  
  <pre><code>import reducer from './reducer';
  import { createStore } from 'redux';
  var store = createStore(reducer);
  </code></pre>
  
  <p>And new line in laravel mix (webpack wrapper) <code>.react('resources/js/storeAccess.js','public/js')</code></p>
  
  <p>and added 
  <code>&lt;script src="js/storeAccess.js"&gt;&lt;/script&gt;</code>
  to head of html</p>
  
  <p>Removed store definition from footer.js:</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import Allocations from "./components/Allocations";
  
  require('./components/Allocations.js');
  
  if (document.getElementById('allocations')) {
      render(
          &lt;Provider store={store}&gt;
              &lt;Allocations /&gt;
          &lt;/Provider&gt;,
          document.getElementById('allocations')
      );
  }
  </code></pre>
  
  <p>and as this is loaded after storeAccess.js, the store should be available to that code anyway.</p>
  
  <p>and get store is not defined at onClick="store.dispatch in the html body.</p>
  
  <p>BUT Still get "store is not defined" at the store.dispatch line.</p>
  
  <p>In fact If I console.log(store) in the head, it is also undefined:</p>
  
  <pre><code>...
  &lt;script src="js/storeAccess.js"&gt;&lt;/script&gt;
  &lt;script&gt;console.log("In head",store)&lt;/script&gt; &lt;-- throws store is not defined
  &lt;/head&gt;
  </code></pre>
  
  <p>I hope this is just a javascript scope or formatting question! Help!</p>