Mobx-state-tree: Lifecyle method question

Created on 8 Jan 2019  路  6Comments  路  Source: mobxjs/mobx-state-tree

I need to validate a model in some circumstances when some of its properties are changed.
I've tried to run the validation using onPatch, onAction and with a custom middleware, however it seems that these methods run just before the action is being called and not after. That cause to validate the previous values and not the modified ones.
Is there a hook that is called after an action has finished to run ?
Moreover running a validator inside one of the aforementioned methods cause an infinite loop.
Can someone please suggest me a way to do that ?

thanks.

question

Most helpful comment

As you can read in the onAction docs, it has a third boolean argument called afterAttach:

| Name | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| target | IAnyStateTreeNode | - | - |
| listener | function | - | - |
| Default value attachAfter | boolean | false | (default false) fires the listener _after_ the action has executed instead of before. |

onAction is a middleware and with afterAttach you call the listener before or after next:
https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/src/middlewares/on-action.ts#L221

If you want to inspect the store with the latest changes, next has already been called, so you can't abort it.

Maybe you could validate the action arguments and abort the action if they are not valid using middleware's abort or you can revert the patch using revertPatch.

All 6 comments

As you can read in the onAction docs, it has a third boolean argument called afterAttach:

| Name | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| target | IAnyStateTreeNode | - | - |
| listener | function | - | - |
| Default value attachAfter | boolean | false | (default false) fires the listener _after_ the action has executed instead of before. |

onAction is a middleware and with afterAttach you call the listener before or after next:
https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/src/middlewares/on-action.ts#L221

If you want to inspect the store with the latest changes, next has already been called, so you can't abort it.

Maybe you could validate the action arguments and abort the action if they are not valid using middleware's abort or you can revert the patch using revertPatch.

@luisherranz Wonderful.
Thank you so much. That's really useful and solved my problem.

Closing then :)

@luisherranz Could you give me the API docs for the function revertPatch? I cannot find the doc anywhere.

When I call the function, the below error occurs:

Uncaught Error: [mobx-state-tree] Patches without oldValue field cannot be inversed

I also create an issue about that.

It's reversePatch sorry, not revertPatch. You can use it on the onPatch callback:
https://github.com/mobxjs/mobx-state-tree/blob/1899fb6adbe8c309f6fa78507e0243a4ceb02daf/docs/API/README.md#onpatch

const store = AppModel.create({ value: { a: { b: { c: 10 } } } })

onPatch(store, (patch, reversePatch) => {
        expect(patch).toEqual({ op: "remove", path: "/value/a" })
        expect(reversePatch).toEqual({ op: "add", path: "/value/a", value: { b: { c: 10 } } })
    })

store.remove("a")

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.

Was this page helpful?
0 / 5 - 0 ratings