Maybe I will feel embarrassed but I couldn't figure out how to use model composition w

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" da

model composition about mobx-state-tree HOT 5 CLOSED

mobxjs commented on May 17, 2024

model composition

from mobx-state-tree.

Comments (5)

mattiamanzati commented on May 17, 2024

ATM the readme is not in sync with the repo code. I think the npm version does not have the composeFactory method. If you check out the in-dev repo version, you can use composeFactory method. https://github.com/mobxjs/mobx-state-tree/blob/master/test/object.ts#L180 Let me know if your issue is solved! :)

from mobx-state-tree.

Kosta-Github commented on May 17, 2024

If I got it right the ComposedFactory there merges the fields into the final instance:

{
    width: 0,        // from Box factory
    height: 0,       // from Box factory
    color: "#FFFFFF" // from Color factory
}

But I would like to achieve this kind of composition:

{
    boxProp:   { width: 0, height: 0 }, // from Box factory
    colorProp: { color: "#FFFFFF"}      // from Color factory
}

from mobx-state-tree.

mattiamanzati commented on May 17, 2024

Uh, sorry I misread! You simply pass in the box type.

const BoxStore = createFactory({
masterBox: Box,
boxes: mapOf(Box),
...

If the masterBox can be null, you should use maybe(Box)

from mobx-state-tree.

Kosta-Github commented on May 17, 2024

const {createFactory, action, mapOf, referenceTo} = require("mobx-state-tree");

const Box = createFactory({
    // props
    name: "",
    x: 0,
    y: 0,

    // computed prop
    get width() {
        return this.name.length * 15
    },

    // action
    move: action(function(dx, dy) {
        this.x += dx
        this.y += dy
    })
});

const BoxStore = createFactory({
    masterBox: Box,
    boxes: mapOf(Box),
    selection: referenceTo("boxes/name"),
    addBox: action(function(name) {
        this.boxes.set(name, Box({ name, x: 100, y: 100}))
    })
});

const boxStore = BoxStore();
boxStore.addBox("test");
boxStore.boxes.get("test").move(7, 3);
boxStore.masterBox.move(15, 10);

produces this:

.../mobx-state-tree-test/index.js:33
boxStore.masterBox.move(15, 10);
                  ^

TypeError: Cannot read property 'move' of null
    at Object.<anonymous> (.../mobx-state-tree-test/index.js:33:19)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:418:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:533:3

from mobx-state-tree.

mattiamanzati commented on May 17, 2024

As said before, that works in the git version, the npm one is'nt aligned :)

from mobx-state-tree.

Recommend Projects