7

I have two files that both need a global variable. I have a click button. When it's clicked, runs a function. The code looks like this:

file1: 

var globalVar = '', // The global variable

<button onClick = {() => this.edit(arg1)}></button>
function edit (arg1){

   globalVar = arg1;
}

module.exports = globalVar;

I have another file, looks like this:

file2:

var globalVar = require(./file1);

function openModal(){

if (globarVar != ''){
 do something

} }

The issue is that when I click button, the globalVar is updated in the edit() function, but I console.log(globalVar) in file2 it shows ' '.My question is how do I pass the globalVar to file2 when I click the button?

Bo Huang
  • 181
  • 1
  • 1
  • 9
  • Consider using Redux. – SLaks Sep 28 '17 at 18:59
  • its not global if it's belongs to to a file, by the way why are you using the `es6` tags when you are writing es5 commonjs syntax? and in react we use `props` to pass objects around – Sagiv b.g Sep 28 '17 at 19:00
  • ops. I was gonna put es5 tag. My apology. I'm new to React.So there is no way to use a global variable in React? – Bo Huang Sep 28 '17 at 19:07
  • It doesn't seem like you're doing anything crazy, so I get the sneaking suspicion that you're writing your components and their hierarchies in an unconventional way. Look into general design paradigms for React and if you still run into this problem where you need a global variable, give us a shoutout. – Andrew Sep 28 '17 at 19:14

1 Answers1

16

If you truly want a global variable (not advisable, of course) then you're always 100% free to do

window.globalVar = 0;

in any of your modules.

The more robust solution would of course be to have this global variable sit in some sort of dedicated module, like

globalVar.js

export default {
    value: 0
};

and then you could 

import globalVal from './globalVar';

globalVal.value = 'whatever';

from any modules needed.

The only risk would be that webpack might duplicate this same "global" value into multiple bundles if you're code splitting, depending on your setup. So separate module would be using their own local copy of this not-so-global variable. EDIT - this isn't true. webpack never did this; that comment was based on a misunderstanding on my part.

Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • I tried out and it worked! One more question. What is the flaw of using window.globalVar? Thank you so much! – Bo Huang Sep 28 '17 at 19:37
  • Well global variables tend to be less maintainable, more difficult to keep track of, etc. But if you're just starting out, experimenting, etc., then by all means. As your program grows and grows, and after you're more familiar with React, you should consider trying a state manager like MobX or Redux (but not before!). These tools introduce complexity into your app, so make sure you explore React itself and get comfy with it before you go that route. Happy coding! – Adam Rackis Sep 28 '17 at 19:40
  • 1
    Thanks for your advice and patience! Much appreciate it! – Bo Huang Sep 28 '17 at 19:47
  • if you `export` an object from `globalVar.js` which is intended to be 'global', i.e. it is available to be accessed from multiple modules, and then `import` it into multiple modules: 1) are those modules accessing the same singular instance of that object? 2) if so, can those modules `update` that singular instance? 3) if so, will those updated values be accessible to all modules referencing it (ie is it 'dynamic')? i have [a question about this with more context here](https://stackoverflow.com/questions/70185112/how-to-define-all-socket-io-io-onconnection-logic-outside-of-app-js-in-a-sep) – user1063287 Dec 02 '21 at 05:27
  • this answer is good. – austingae Jun 21 '22 at 23:56