mergeWithObservable

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.

Table of Contents

• Installation
• Usage

Installation

Execute this command in your environment.

npm install merge-with-observable --save

or

yarn add merge-with-observable

Table of Contents

Usage

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
        ]
    }
}

Table of Contents