I need to take value of variable which placed outside of my react container.
<body>
<div id='react-app'></div>
<script>
var _variable = 3
</script>
</body>
I need to take this value in my react-ponent and if possible store this value in Store ( redux )
I need to take value of variable which placed outside of my react container.
<body>
<div id='react-app'></div>
<script>
var _variable = 3
</script>
</body>
I need to take this value in my react-ponent and if possible store this value in Store ( redux )
Share Improve this question asked Feb 27, 2017 at 18:24 Андрей ГузюкАндрей Гузюк 2,1646 gold badges31 silver badges56 bronze badges 5-
2
Your variable should be accessible through the global scope as
_variableor more explicitlywindow._variable. – SimpleJ Commented Feb 27, 2017 at 18:26 - Additionally here's a nice tutorial for supplying initial state in a Redux store. Hydrating the store is one of Redux' strengths, since it's pletely decoupled from the rest of the app. – gkats Commented Feb 27, 2017 at 18:31
-
In ponentDidMount tried to take variable
window._variable-> got undefined – Андрей Гузюк Commented Feb 27, 2017 at 18:33 - Where is your script tag? – Davin Tryon Commented Feb 27, 2017 at 18:34
- question: where is that value ing from? Because I can't think of a single instance where you can get that value for putting in your actual HTML page, but you can't make your app get that value instead. – Mike 'Pomax' Kamermans Commented Feb 27, 2017 at 19:22
3 Answers
Reset to default 3If you put the declaration script before the react-loading script, the react script should be able to access it.
<script type="text/javascript">
var x = {{ user_details }};
</script>
<script src="/static/app.js"></script>
Redux has an api to hydrate reducers when configuring store.
The signature of createStore method is:
createStore(reducer, [preloadedState], [enhancer])
Meaning that you can define your configureStore method as:
import { createStore, bineReducers, applyMiddleware, pose } from 'redux';
import thunk from 'redux-thunk';
import reducerA from 'reducers/a'
import reducerUserDetails from 'reducers/user-details'
export default function configureStore(initialState = {}) {
const reducer = bineReducers({
reducerA,
reducerUserDetails,
});
// If you want to use dev tools
const poseEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : pose;
const enhancer = poseEnhancers(
applyMiddleware(
thunk // If you want to have async actions
)
);
return createStore(reducer, initialState, enhancer);
}
Then in your entry file such as index.js or similar, you would include the configureStore and call it while passing user details:
const store = configureStore({
reducerA: {...},
reducerUserDetails: window.userDetails || {},
});
ReactDOM.render(
<Provider store={store}>
<YourApp />
</Provider>,
document.getElementById('react-app'),
);
This is an interesting challenge with a whole bunch of technical approaches.
Singleton
The simplest approach that will work for most devs is taking advantage of the fact that ES6 modules are singletons. This means that you can configure an object in one module, and import it in another and know that the value will be the same.
That being said, we can easily pass in variables when we initiate the app.
Why not use global variables? You can definitely bring in global variables and call it a day, but then that would be an anti pattern that ES6 is trying to establish. Here's a great walk through on why to avoid global variables in JS
So, how can we do this then?
Lets control when we initiate a React App
First, wrap your reactDom.render() in a function:
import React from 'react'
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import MyApp from "./pathto/myapp.js"
import store from "./pathto/store.js"
window.RenderApp = function () {
new ReactDom.render(
<Provider store={store}><MyApp /></provider,
document.getElementById('root_element')
);
}
So this should look fairly familiar to those of you who have been working with react and ES6. All we've done here is wrap it in a function that is bound to the window object so that it is available to outside JS.
Now, initializing your react app should now look something like this:
<div id="root_element"></div>
<script src="path/to/bundle.js></script>
<script>
window.RenderApp();
</script>
So, how do we pass variables into it? Some of you may have guessed it already :) We've set up our app to accept variables through its parameters:
...
window.RenderApp = function (outside_variable) {
new ReactDom.render(
<Provider store={store}><MyApp someProp={outside_variable} /></provider,
document.getElementById('root_element')
);
}
And in our HTML
...
<script>
var x = 72;
window.RenderApp(x);
</script>
What About Redux?
So this works fine if we want to add it to the props, of course, when we're using larger apps we use stores with redux. It's just more sane that way. So this is where that bit about taking advantage of singleton objects in ES6 es into play.
Create A Default Store Module
Lets create a new file that will store the default value for a store. We'll call it defaultStore.js.
let defaultStore = {
item: "one",
other: "two"
}
export default (defaultStore);
Now, lets introduce it to our reducer:
import defaultStore from "path/to/defaultStore.js"
export default function app( state = defaultStore, action ) {
switch (action.type) {
//...
}
return state;
}
Back to our function we build earlier, we include our default store:
...
import defaultStore from "path/to/defaultStore.js"
window.RenderApp = function (outside_variable) {
defaultStore.item = outside_variable;
new ReactDom.render(
<Provider store={store}><MyApp /></provider,
document.getElementById('root_element')
);
}
Because this portion of the app will be called before the app renders, we are mutating the default store before the main store gets built.
And just one more time lets take a look at the js in the HTML
...
<script>
var x = 72;
window.RenderApp(x);
</script>
And that does the trick! You can even set entire outside stores this way, or create a fancy merging object witchcraft you want.