Drag and Drop with Redux / Immutable data

[bdebon]

Hello,

The documentation states that if we want to use the drag and drop with Redux/Immutable data, we have to implement or own behavior. Easier said than done! I have tried a solution for hours without succeeding, that's why I allow myself to ask you today if you know a simple way to implement that.

My html looks like this: <tree-root (updateData)="onUpdate()" [state]="state" [options]="options" [focused]="true" [nodes]="nodes | async"> </tree-root>

where nodes | async is the tree served by my store. My first idea was simple, I used you method to handle the creation of the new tree and then I was dispatching that new tree to my store.

actionMapping: {
      mouse: {
        drop: (tree: TreeModel, node: TreeNode, $event: any, {from, to}: { from: any, to: any }) => {
          
          TREE_ACTIONS.MOVE_NODE(tree, node, $event, {from, to});

          setTimeout(() => {
            this.ngRedux.dispatch({
              type: UPDATE_TREE,
              payload: [...tree.nodes]
            });
          }, 100);

        }
      }
    }

But this is not working pretty well, because TREE_ACTIONS.MOVE_NODE(tree, node, $event, {from, to}); update the view by itself so it breaks the link between my store and my view. Actually it breaks that thing:

[nodes]="nodes | async"

So I don't know what to do and I'm affraid that implementing the behavior of the drag and drop is a hard task because dealing with recursive stuff and tree is not always simple.

If I could use a kind of function like TREE_ACTIONS.MOVE_NODE(tree, node, $event, {from, to});

that would return me a copy of the tree like it should be, I would dispatch that in my store and everything would be over!

I hope everything is clear and that you will be able to point me toward a beginning of solution because for now, it is driving me crazy!

I also want to thank you for the hard work because the plugin is really dope!

Benjamin