Mobx: extendObservable and Object.keys()

[josvos]

Hi,

When using Object.keys() on an observable object in a React component, the component is not updated when I extend that object using extendObservable(). When I change something else that triggers a rerender, the new key added before with extendObservable() shows up correctly in the component. Also, from then on, updates for that key's value correctly trigger a rerender.

Am I doing something wrong or is this a bug?

Thanks, Jos

[mweststrate]

No this is the expected behavior, if you need dynamically keyed objects map should be used instead.

[mweststrate]

Closing this issue, if anything is unclear, just let me know

[mavericken]

@josvos What you are asking can be done with a plain observable object if you use this function:

function keys(obj){
    //alternative to Object.keys() that keeps up with extended observables
    //warning: I don't know enough about mobx internals to know if this could cause leaks/perf problems/bugs
    if(!obj.$mobx) return Object.keys(obj);
    if(obj.$mobx.keys) return obj.$mobx.keys;
    obj.$mobx.keys = observable([]);
    observe(obj,function(change:any){
        if(change.type=="add"){
            obj.$mobx.keys.push(change.name);
        }
    })
    return obj.$mobx.keys;
}

@mweststrate How opposed would you be to including a function like in mobx?

Despite the challenges, I feel it might be a good idea to at least pick the low hanging fruit on making this easier to do. While maps are a step forward in many regards, I believe they are a step backwards when it comes to syntax. Once we have proxy objects, do the maps really bring anything to the table?

this.tree["object"]["is"]["way"]["better"]["this"]["way"]=true
this.tree.get("object").get("is").get("just").get("as").set("good",false)