You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Firstly just want to give praise to this library, of the myriad Proxy based libs I definitely prefer the explicit get and set behaviour this one offers. I've been trying it out by refitting a hobby project that I'd built using basic useContext+useState and for the most part it's been pretty smooth, though I've had to trial and error a few areas the docs don't go into too much detail about.
The issue I've run into and been unable to figure out what seems to be an intended approach revolves around a computed value failing to trigger an observe callback when expected.
This following is executed using 3.0.0-beta.16.
Apologies for these examples being a bit long, but I couldn't figure out how to boil them down much more:
interface SubType {
subVal: number;
}
const baseVal: SubType[] = [
{subVal: 1},
];
const a$ = observable({
aVal: [] as SubType[],
});
const b$ = observable({
bVal: () => {
return [
...baseVal,
...a$.aVal.get(),
];
},
});
observe(() => {
// The following line is required for `a$.aVal[0].subVal.set(3);` to trigger an update
// a$.aVal.get();
const data = b$.bVal.get();
console.log('called', JSON.stringify(data));
});
a$.aVal.push({subVal: 2});
a$.aVal[0].subVal.set(3);
console.log('end', JSON.stringify(a$.aVal.get()), JSON.stringify(b$.bVal.get()));
Run this, and we get logged out:
called [{"subVal":1}]
called [{"subVal":1},{"subVal":2}]
end [{"subVal":3}] [{"subVal":1},{"subVal":3}]
If we uncomment the a$.aVal.get(); line, we instead have the following logged:
called [{"subVal":1}]
called [{"subVal":1},{"subVal":2}]
called [{"subVal":1},{"subVal":3}]
end [{"subVal":3}] [{"subVal":1},{"subVal":3}]
As we see, the observe callback doesn't trigger when the subVal is set to 3 by using bVal.get() alone. Instead we need to also call aVal.get() to register an additional listener.
In contrast to this too is the following example, where we switch the comlpex SubType for a primitive:
const baseVal: number[] = [
1,
];
const a$ = observable({
aVal: [] as number[],
});
const b$ = observable({
bVal: () => {
return [
...baseVal,
...a$.aVal.get(),
];
},
});
observe(() => {
// The following line is not required for `a$.aVal[0].set(3);` to trigger an update
// a$.aVal.get();
const data = b$.bVal.get();
console.log('called', JSON.stringify(data));
});
a$.aVal.push(2);
a$.aVal[0].set(3);
console.log('end', JSON.stringify(a$.aVal.get()), JSON.stringify(b$.bVal.get()));
Without the additional listener we get the following logged:
called [1]
called [1,2]
called [1,3]
end [3] [1,3]
So to conclude, whilst I'm not 100% certain what the intended behaviour is, this does strike me as a bug since the primitive example works as I would have expected it whilst the complex subtype does not.
The text was updated successfully, but these errors were encountered:
Firstly just want to give praise to this library, of the myriad Proxy based libs I definitely prefer the explicit get and set behaviour this one offers. I've been trying it out by refitting a hobby project that I'd built using basic useContext+useState and for the most part it's been pretty smooth, though I've had to trial and error a few areas the docs don't go into too much detail about.
The issue I've run into and been unable to figure out what seems to be an intended approach revolves around a computed value failing to trigger an observe callback when expected.
This following is executed using
3.0.0-beta.16
.Apologies for these examples being a bit long, but I couldn't figure out how to boil them down much more:
Run this, and we get logged out:
If we uncomment the
a$.aVal.get();
line, we instead have the following logged:As we see, the observe callback doesn't trigger when the subVal is set to 3 by using
bVal.get()
alone. Instead we need to also callaVal.get()
to register an additional listener.In contrast to this too is the following example, where we switch the comlpex
SubType
for a primitive:Without the additional listener we get the following logged:
So to conclude, whilst I'm not 100% certain what the intended behaviour is, this does strike me as a bug since the primitive example works as I would have expected it whilst the complex subtype does not.
The text was updated successfully, but these errors were encountered: