MobX Updating a decorated object inside a decorated array property doesn't emit reaction - mobx

Question

I wrote a React prototype for a pay rates field that I'm working on, and now I'm trying to lift state up to a domain store for it. Right now, I'm just trying to test for reactions in the console, but for some reason, reactions aren't working when using an action to change a field of the observable array for that store.
Code
I have the following :
data object
class PayRate {
/**
* #param {number} taskId The id of the task. (-1 for all)
* #param {Date} effectiveDate The date the payrate goes in effect.
* #param {number} rate The rate of pay.
*/
constructor(taskId, effectiveDate, rate) {
this.TaskId = taskId || -1;
this.EffectiveDate = effectiveDate ? new Date(effectiveDate) : new Date();
this.Rate = rate || 0.00;
this.OriginalObject = Object.assign({}, this);
}
/**
* Gets a readable version of the effective date.
* #returns {string} A -m/dd/yyyy representation of the effective date.
*/
GetReadableDate() {
return this.EffectiveDate.toLocaleDateString("en-US");
}
/**
* Gets a one line description of the pay rate.
* #returns {string} A string in the form of (date) - payrate.
*/
GetDescription() {
return `(${this.GetReadableDate()}) - $${this.Rate.toFixed(2)}`;
}
/**
* Gets a one line description of the pay rate.
* Does the exact same as GetDescription(), but is overload of Object.prototype.toString, which allows for stringification of Objects
* #returns {string} A string in the form of (date) - payrate.
*/
toString() {
return `(${this.GetReadableDate()}) - $${this.Rate.toFixed(2)}`;
}
/**
* Tells whether a pay rate was changed or not.
* #returns {boolean} A boolean saying whether or not the pay rate was changed.
*/
IsChanged() {
if (this.EffectiveDate.getTime() !== this.OriginalObject.EffectiveDate.getTime()) {
return true;
}
if (this.Rate != this.OriginalObject.Rate) {
return true;
}
if (this._deleted) {
return true;
}
return false;
}
/**
* Reverts the changes back to the original.
*/
RevertChanges() {
Object.assign(this, this.OriginalObject);
}
}
// mobx decorations
mobx.decorate(PayRate, {
TaskId : mobx.observable,
EffectiveDate : mobx.observable,
Rate : mobx.observable,
})
Domain store
class PayRatesStore {
constructor() {
this.payRates = [];
this.payRateIndex = -1;
this._dateString = '';
this.payRateIndicesToDelete = [];
mobx.autorun(() => {
console.log(this.payRates)
console.log(this.currentPayRate)
})
}
// getters
get currentPayRate() {
if ((this.payRates) && (this.payRates.length)) {
return this.payRates[this.payRateIndex];
}
return new PayRate();
}
get dateString() {
if (!this._dateString) {
if (this.currentPayRate) {
return this.currentPayRate.GetReadableDate()
}
return "";
}
return this._dateString;
}
set dateString(str) {
this._dateString = str;
}
updateCurrentPayRateDate(dateString) {
// update _dateString
this._dateString = dateString
this.payRates[this.payRateIndex].EffectiveDate = new Date(dateString)
}
}
mobx.decorate(PayRatesStore, {
payRates : mobx.observable,
payRateIndex : mobx.observable,
_dateString : mobx.observable,
payRateIndicesToDelete : mobx.observable,
currentPayRate : mobx.computed,
dateString : mobx.computed,
updateCurrentPayRateDate : mobx.action.bound
})
Setting up the PayRatesStore causes reactions as we expect:
let payRate = new PayRate(1, "03/25/2019", 15.5),
payRates = [ payRate ]
// create PayRatesStore
let payRatesStore = new PayRatesStore()
console.log("Passing data to pay rates store....")
payRatesStore.payRates = payRates
payRatesStore.payRateIndex = 0
causes the following to be console.logged:
However, when I try:
payRatesStore.updateCurrentPayRateDate('4/1/2019')
Nothing happens; // MobX doesn't react!!
I don't know what I can do to get MobX to react to this, as it was lifted up from the React Component.

Answer 1

It seems you misunderstand how autorun works.
autorun subscribes to changes in the values of the variables that are referenced in the function.
What is happening
Here, your autorun function is observing payRates and currentPayRate.
The first time, you modify both payRates and currentPayRate (because you change payRateIndex, it updates the computed property currentPayRate).
-> autorun reacted.
The second time, you modify an element property in the payRates array, not the value of this.payRates itself, it is still the same array. So, payRates did not change, nor currentPayRate.
-> autorun does not react.
More about autorun
Autorun won't subscribe to "nested" array elements. For more details, you could read this: Watch for nested object/array changes