Hot-reload issue about overmind HOT 6 CLOSED

Hi @smashercosmo, glad you enjoying it! :)

This is certainly an interesting scenario!

Though I guess you are trying to insert the same data on the some paths in the tree? We could make an exception for that. If you try to put the same object into the same path we just ignore it, cause it is already there. But if the path has changed, we yell at you :) You think that would work?

from overmind.

I think it would work) But, honestly, may be it's not worth spending time on that. It's been already a month since I last encountered this issue) Maybe it's not even hot-reload related. Next time I encounter it, I'll try to make a minimal reproducible example. Up until then, we can close the issue I think)

from overmind.

I'm also loving this library!!

I'm having a similar problem (and the same error) and it's not hot-reload's fault in my case. I don't really understand what proxy-state-tree does but here's my situation:

I have an array of states:

recordedState: [
    { activeTab: 0, cursorPosition: { column: 2, lineNumber: 1 } },
    { activeTab: 0, cursorPosition: { column: 1, lineNumber: 2 } },
    { activeTab: 0, cursorPosition: { column: 1, lineNumber: 3 } },
    {activeTab: 0, cursorPosition: { column: 1, lineNumber: 4 } }
  ],

My main state has an activeTab and a cursorPosition on it as well, and I want to set my state to each of these recorded states. Setting activeTab works just fine (probably because it's just a simple number?), but when I try to update state.cursorPosition:

state.cursorPosition = recordedState[0].cursorPosition

it gives me an error because it (naturally) finds that same cursorPosition in recordedState.0.cursorPosition.

I'm guessing the goal is to avoid needless copying of objects, but in this case I explicitly want a copy.

My workaround was to create a new cursorPosition with the appropriate values at the point where I want to set my current state. Not a huge inconvenience.

Or am I just missing something super obvious?

from overmind.

@smashercosmo Cool, let me know if it pops up again :)

@futurepaul Hi there!

Yeah, every object in the state tree has a "proxy address". Basically the path to where it lives in the tree. When you try to put these objects on other paths proxy-state-tree yells at you because it can only have one proxy for any path.

Overmind encourages reference by key, https://www.overmindjs.org/guides/beginner/02_definingstate?view=react&typescript=true#defining-state-references. Though in this scenario I see that it is not a s straight forward as the cursorPosition is not really some entity to reference. In this case you really just have to be more specific as you said:

state.cursorPosition = {
  column: recordedState[0].cursorPosition.column,
  lineNumber: recordedState[0].cursorPosition.lineNumber
}

or just spread it:

state.cursorPosition = {
  ... recordedState[0].cursorPosition
}

Or you could do it by reference:

{
  cursorPositionIndex: 0,
  recordedState: [
    { activeTab: 0, cursorPosition: { column: 2, lineNumber: 1 } },
    { activeTab: 0, cursorPosition: { column: 1, lineNumber: 2 } },
    { activeTab: 0, cursorPosition: { column: 1, lineNumber: 3 } },
    {activeTab: 0, cursorPosition: { column: 1, lineNumber: 4 } }
  ],
  get cursorPosition() {
    return this.recordedState[this.cursorPositionIndex].cursorPosition
  }
}

It is a limitation in our approach really. We have talked about allowing multiple addresses on the proxies, but it has a bit of consequences. Doing things by reference works really nicely and it avoids unwanted mutations. You always know that a change you make at a specific "address" in the tree only occurs at that address.

from overmind.

Thanks for this explainer! I like the "by reference" version, seems like that's doing the least work.

from overmind.

Cool! :) Yeah, that is the most common and the one I would recommend. It is more verbose, but it is a lot easier to debug as there is only one version of any object in the tree :)

from overmind.