Late attachment of Downgraded plugin does not clean up the caches

[meerkat-citronella]

I am trying to do something very simple and what I consider intuitive... I am trying to create a global state which is an array of objects, and then tap into it later, getting and setting that global state. Problem is I'm not able to get() the value of this state, let alone set() it.

I have this:

import { createState, useState } from '@hookstate/core'

interface KeyValues {
  [key: string]: string; //e.g. "Date": "7/5/2015"
}

interface KeyValuesByDoc {
  docName: string;
  docType: string;
  docID: string;
  keyValuePairs: KeyValues;
  interpretedKeys: KeyValues;
}

const getKeyValuePairsByDoc = (): KeyValuesByDoc[] => {
...
...
return docData 
}

export const globalDocData = createState(getKeyValuePairsByDoc())

...
...
...

// in a component, 
const docData = useState(globalDocData)

console.log(docData.get())
// => TypeError: docData.get is not a function

Now I understand that this isn't necessarily the right way to access the state of an object... even following the docs, the example given doesn't work:

const exampleObjectData = { a: 1, b: 2 }
const globalExampleObject = createState(exampleObjectData)

....
...
...

// in a component 
const exampleState = useState(globalExampleObject)
console.log(exampleState.keys)
// => Proxy{} 
// expected output: [a, b] per the docs

Really simple question... how can I 'get' the state value of an array of objects? Can I not just get it... do I have to map it first? Why isn't it as simple as just doing .get() like for primitives?

I also tried the fix mentioned in this thread...

import { Downgraded } from '@hookstate/core'

// in a component
const exampleState = useState(globalExampleObject)
console.log(exampleState.attach(Downgraded).get())
// => TypeError: exampleState.attach is not a function

[avkonst]

What you do should work.
Are you sure you use useState from Hookstate but not from React package?

[meerkat-citronella]

Are you sure you use useState from Hookstate but not from React package?

Yes.

The solution I've come up (kinda hacky) is to convert my object to a string when setting, and parsing as JSON after getting... so the whole thing is just a string and behaves with the rules of primitives.

[avkonst]

const exampleState = useState(globalExampleObject)

What is the result of Object.keys(globalExampleObject) and Object.keys(exampleState)?

Can you post the screenshot of object inspection for both variables?

Can you create a separate repository with a reproducer?

What you see is abnormal. Something strange with your environment.

[meerkat-citronella]

Here is a code sandbox with the issue recreated. I wasn't able to recreate what I'm seeing in my app in the sandbox.

I realized I was running v2.0.1... upgraded to v3.0.1. This didn't solve the issues, but it prevent them from causing breaking errors. Here are screenshots from my app:

Creating the state:

Using the state in a component:

As you can see, the attach() and get() methods are no longer throwing errors, but they are still returning the proxy instead of the actual object.

[avkonst]

The sample in codesandbox works fine. And I tested get methods and attached downgraded also makes an effect there. The only weird thing about the codesandbox is that it can not show proxies in the log console properly. It shows null instead. But I guess it is because the browser does not let javascript to inspect objects behind the proxy (which is expected and correct).

If you see different behaviour in you app, could you please commit it to the repository which I could clone and install?

[meerkat-citronella]

The code is ensconced in our app and would be difficult to extricate and push to a repo... so, apologies, i can't provide the code for you to review. But thank you for your prompt replies and help with the issue.

[avkonst]

I understand why you still see the proxy after the Downgraded().

Remove these lines:

And you will see no proxy after downgraded.

The get() caches return value. This might be considered as a bug. I will think if it can be fixed. Current workaround is to attach Downgraded straight after useState call

[meerkat-citronella]

This worked! thanks!

[avkonst]

Keep it open. I will try to fix it so the order does not change the behaviour

[TroyJoachim]

@avkonst
Were you about to find a possible fix of this. I would like to keep the proxy type on there so I get the performance benefits, then remove it right before I post to my api.

[avkonst]

The solution I think is known. Just did not have time to come back to it. I will have a look at this tomorrow

…

On Tue, 16 Feb 2021, 12:27 TroyJoachim, ***@***.***> wrote: @avkonst <https://github.com/avkonst> Were you about to find a possible fix of this. I would like to keep the proxy type on there so I get the performance benefits, then remove it right before I post to my api. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6JSVPDDJZ3L65GJ2OII2TS7GUXNANCNFSM4RN3QSVA> .

[avkonst]

Fix released in 3.0.6

[adrianoos]

Hello

It might be something simple ... but i can't access my nested state
I'm using - "@hookstate/core": "^4.0.0",

I created a state with hookstate({
value1: '',
value2: ''
etc
})

When my app starts it sets
globalState.value1.set(array of Objects)

When I try to access my globalState.value1 it returns a proxy instead of value

same with .get()

What am I doing wrong ?

[adrianoos]

Ok, so I used .get({ noproxy: true }) and it works fine now i have array of objects.