Reputation: 1474
I've broken down my source code so that certain classes are responsible for creating and updating key objects in my application. The trouble is when I move those objects into separate modules and they are updated outside of the module, other modules do not reflect the updated object because it's not aware of the changes which have happened outside of the module.
For example below is a simplified example:
// config.js
class Config {
constructor() {
this.value = false
}
set(value) {
this.value = value
}
}
const config = new Config()
export default config
//output.js
import config from './config'
console.log(config.value) // -> false
// Use the config to return a new value
class Output {
constructor() {
this.data = config.value
}
}
const output = new Output()
export default output
//index.js
import config from './config'
import output from './output'
config.set(true) // Value set by user of application
console.log(config.value) // -> true
console.log(output.data) // -> false
I know why this doesn't work as I want, but I don't know how to I should be dealing with this situation. Currently, the only way I can think to get around this issue is to pass the updated object to each class as a parameter of its constructor. However, in my actual application, it's much more complicated than this example and it gets very messy having to import the updated object into each class or function which needs it.
You can see an example of the actual source code where I am passing config
, theme
and data
through the constructor to get around it.
What's the better way to deal with this issue?
Upvotes: 2
Views: 2364
Reputation: 16908
In your output.js
file, you are copying the value of config.value
in the constructor when the object is instantiated. After the instantiation you are exporting the object initialized with false
.
Now in the index.js
you are accessing the value of output.data
after you changed the value
property in config
to true
, but the thing is when the output
object was instantiated the value of the data
property was copied over from the config.value
and does not maintain a reference to it. This is because the value
is a primitive and not an object reference.
So to fix this you need to use the config
object reference which is already imported in your module, so that when the object state is changed you get the updated value through the reference:
import config from './config.js'
class Output {
get data(){
return config.value;
}
}
Here I created a getter having the name data
which reads the data directly from the config
object reference.
Now when you change the value
through the set
method of config
the new value would be reflected:
config.set(true);
console.log(config.value) // -> true
console.log(output.data) // -> true
Upvotes: 3