In my project, i have a list of schema just like this:
const schema = [
{
// some properties...
label: 'example1',
effect: {
depends: [...],
callback: () => {}
}
},
{
// some properties...
label: 'example2',
effect: {
depends: [...],
callback: () => {}
}
},
// for more...
]
Then I will generate the DOM structure based on this schema.
In this schema, when a variable in the depends array is modified, I should execute the callback. However, the elements in depends can be any value, such as an item in props, an observable element from MobX, a value returned from useState, the state of a class component, etc.
So, the implementation of this logic in the code would look something like this:
const getSchema = () => {
const { propsVal } = props;
cosnt { mobxVal } = mobxStore;
const { stateVal } = this.state;
const normalVal = 1;
const schema = [
{
// some properties...
label: 'example1',
effect: {
depends: [propsVal, stateVal, normalVal],
callback: (preVal, curVal) => {
// pre and cur should be objects that contain all the changed properties.
const { propsVal, stateVal, normalVal } = preVal;
const { propsVal, stateVal, normalVal } = curVal;
console.log(preVal)
console.log(curVal)
}
}
},
{
// some properties...
label: 'example2',
effect: {
depends: [mobxVal, stateVal],
callback: () => {
// do sth...
}
}
},
// for more...
]
}
return schema;
}
So, how should I design it to achieve this functionality?
I previously tried using Proxy, but Proxy intercepts the set operation only if the value is assigned to the object returned by the Proxy. Since these values come from various sources and there isn’t a unified set method, it prevents the Proxy from being able to proxy all values.
I would greatly appreciate any suggestions anyone might have for my question!