immerjs / immer

Create the next immutable state by mutating the current one

Home Page:https://immerjs.github.io/immer/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Question] How to add/remove/edit a deeply nested element which localization is defined by a string?

lveillard opened this issue · comments

🙋‍♂ Question

For this particular use case lets imagine a file/folder explorer. When adding/removing/editing files or folders, we have an string that tells us the current path. For example "/dashboard/employee" now let's say we want to:

  • Add a new route to that URL => /dashboard/employee/newRoute
  • delete the current route => /dashboard/employee
  • Edit current route => /dashboard/employees

How could we manage this dynamic context that depends on our current URL?

For more context, let imagine the tree object as this (but it could be any other structure that better matches immer's way of working)

const tree = [
    {
      route: 'root',
      name: 'dashboard',
      children: [
        {
          route: '/dashboard',
          name: 'employee',
          children: [
            { route: '/dashboard/employee', name: 'profile' },
            { route: '/dashboard/employee', name: 'config' },
          ],
        },
      ],
    },
    {
      route: 'root',
      name: 'login',
    },
  ];

It is unclear to me what this question has to do with Immer. Maybe stackoverflow is a better place to ask? Immer has no specific requirements on structure, beyond using trees and plain data structures (array, map, set, non-class object), and both conditions seems to be met by your tree.

Hello @mweststrate.
The question is on the title, the rest is context. I was wondering if there is a way to perform edits/adds/deletions by the route string.

Other libs I've checked have an easy way to set deeply nested children on an object, and i was wondering what is the best way to do so with immer