{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Redux / Immutable Data","type":"basic","slug":"redux-immutable-data","excerpt":"","body":"[block:api-header]\n{\n  \"title\": \"Use ID\"\n}\n[/block]\n\nWorking with the tree using immutable data is possible.\n\nMake sure that:\n1. You provide a unique `id` property on each node\n2. If you have a different key property, then set the `idField` in the options\n3. You override drop action as stated below\n[block:api-header]\n{\n  \"title\": \"Override drop action\"\n}\n[/block]\nDrag and drop by default mutates the children.\nIf working with immutable data, you must override the action and supply your custom behaviour:\n```\noptions = {\n  actionMapping: {\n    mouse: {\n      drop: (tree: TreeModel, node: TreeNode, $event: any, {from , to}: {from: any, to: any}) => {\n        // custom action. parameters: from = node, to = {parent, index}\n      }\n    }\n  }\n}\n```\n[block:api-header]\n{\n  \"title\": \"Rebuilding the tree\"\n}\n[/block]\nEvery time the nodes array changes, the entire tree model is rebuilt.\nThis might be costly if you have a huge amount of nodes that change very frequently.","updates":[],"order":6,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5c27be9e2b75bd0045dc746c","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Guides","slug":"documentation","order":1,"from_sync":false,"reference":false,"_id":"5c27be9e2b75bd0045dc7459","version":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","createdAt":"2016-04-08T14:56:07.661Z","__v":0},"project":"5707c6875309d117006948d4","user":"54d742a80771980d0052f4b5","parentDoc":null,"version":{"version":"8.2.0","version_clean":"8.2.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5c27be9e2b75bd0045dc7458","5c27be9e2b75bd0045dc7459","5c27be9e2b75bd0045dc745a"],"_id":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5b65b08eb1906e000319f872","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z"},"createdAt":"2017-04-04T06:42:09.111Z","githubsync":"","__v":0}

Redux / Immutable Data


[block:api-header] { "title": "Use ID" } [/block] Working with the tree using immutable data is possible. Make sure that: 1. You provide a unique `id` property on each node 2. If you have a different key property, then set the `idField` in the options 3. You override drop action as stated below [block:api-header] { "title": "Override drop action" } [/block] Drag and drop by default mutates the children. If working with immutable data, you must override the action and supply your custom behaviour: ``` options = { actionMapping: { mouse: { drop: (tree: TreeModel, node: TreeNode, $event: any, {from , to}: {from: any, to: any}) => { // custom action. parameters: from = node, to = {parent, index} } } } } ``` [block:api-header] { "title": "Rebuilding the tree" } [/block] Every time the nodes array changes, the entire tree model is rebuilt. This might be costly if you have a huge amount of nodes that change very frequently.