I am trying out unstated
(https://github.com/jamiebuilds/unstated) and like its simplicity but am experiencing unexpected behavior. At the top level I have:
<Provider>
<Subscribe to={[MyDataContainer]}>
{myDataStore => (
<TopLevelComponent dataStore={myDataStore} />
)}
</Subscribe>
</Provider>
Then way down my component tree, I access the store again using something like this:
<Subscribe to={[MyDataContainer]}>
{myDataStore => (
<Leaf dataStore={myDataStore} />
)}
</Subscribe>
This works great as long as my tree stays the same. As soon as I have a state change that requires rebuilding the leaves, the state object in my data container gets re-initialized and wiped out. What am I doing wrong?
I think you can solve this in two different ways:
Container
instead of the class.<Provider>
.In the first option, the instance remains the same on every
import
, and you will have<Subscribe to={[instance]}>
. Unstated docIn the second, you can do
<Subscribe to={[ContainerClass]}>
but Unstated will try to resolve if there is an instance of that class injected through the<Provider>
and use that instance instead of re-instantiate. Unstated doc