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.
The details are populated in response to a redux action ONE_TRANS_LOAD_DETAILS
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'.
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});
In my html list on the left, I have <div class='row' onClick="store.dispatch({ type: 'ONE_TRANS_LOAD_DETAILS',transId: {{ $trans->id }} }))"> (I am using laravel with a blade template to generate this html)
I have set the store as an export in my application root code (footer.js):
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(
<Provider store={store}>
<TransDetails />
</Provider>,
document.getElementById('allocations')
);
}
So how to ensure store is set to the redux store available to the html list on the left?
I have tried:
1) putting the export in the javascript file named 'money.js' that webpack builds for me and I import in the html header thus: <script src="js/money.js"></script>
money.js:
require('./bootstrap');
import { store } from './footer.js';
but I get 'store is not defined' when I try and use it in the html list
2) SO I tried a script tag in the body:
</head>
<body>
<script>
import { store } from './footer.js';
</script>
...
but I get 'SyntaxError: Unexpected token {' at the import { store } line
3) I have tried putting the import in the head:
<script>
import { store } from './footer.js';
</script>
But I also get unexpected token error.
4) (Thanks @MTCoatser) I made accessStore be processed by webpack to ensure compatibility: New javascript file storeAccess:
import reducer from './reducer';
import { createStore } from 'redux';
var store = createStore(reducer);
And new line in laravel mix (webpack wrapper) .react('resources/js/storeAccess.js','public/js')
and added
<script src="js/storeAccess.js"></script>
to head of html
Removed store definition from footer.js:
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(
<Provider store={store}>
<Allocations />
</Provider>,
document.getElementById('allocations')
);
}
and as this is loaded after storeAccess.js, the store should be available to that code anyway.
and get store is not defined at onClick="store.dispatch in the html body.
BUT Still get "store is not defined" at the store.dispatch line.
In fact If I console.log(store) in the head, it is also undefined:
...
<script src="js/storeAccess.js"></script>
<script>console.log("In head",store)</script> <-- throws store is not defined
</head>
I hope this is just a javascript scope or formatting question! Help!
