Function which recursively merges provided object into MobX observable taking into account custom rules when specified.
Imagine the situation when your nested observable objects in the state have to be updated by different update messages. It may be the case when every distinct update message brings only partial data. You need a clever way how to apply this data.
This repo contains
mergeWithObservable(observableObject, objectToMerge, rulesDefinition)function which tries to solve this situation.
Execute this command in your environment.
npm install merge-with-observable --save
or
yarn add merge-with-observable
Let's demonstrate how to apply mergeWithObservable function. Let's imagine
a project where we can find this type of observables:
{
sport: {
id: 2,
name: "soccer",
bets: [
3, 4, 5, 6
]
}
}We have sport and bets for this sport. Let's imagine system has initial knowledge only about sport ids:
const observableObject = observable({
sport: {
id: 2
}
});Then we say we have 3 different update messages with partial data:
const objectToMerge1 = {
sport: {
id: 2,
name: "soccer"
}
};and
const objectToMerge2 = {
sport: {
id: 2,
bets: [
1, 2, 3, 4
]
}
};and
const objectToMerge3 = {
sport: {
id: 2,
bets: [
3, 4, 5, 6
]
}
};We don't want same bets to be present in the object after the merge. Also we want only bets starting at 2. How we can do that?
First we define our constrain in the rules object (same shape as observable):
const rulesDefinition = {
sport: {
bets: (observableObject, objectToMerge, key) => {
if (observableObject[key] === undefined) {
observableObject[key] = observable([]);
}
objectToMerge[key].forEach((newValue) => {
if (observableObject[key].find((value) => value === newValue) === undefined && newValue >= 2) {
observableObject[key].push(newValue);
}
});
}
}
};Then we merge 3 update messages with this calls:
mergeWithObservable(observableObject, objectToMerge1, rulesDefinition);
mergeWithObservable(observableObject, objectToMerge2, rulesDefinition);
mergeWithObservable(observableObject, objectToMerge3, rulesDefinition);Profit. Our observable is now in this state:
{
sport: {
id: 2,
name: "soccer",
bets: [
2, 3, 4, 5, 6
]
}
}