TypeScript?

[Ofer Gal]

What version of this package are you using? 050
What problem do you want to solve? I have to use TypeScript.
With the changes you made in 0.5.0 the example in https://codesandbox.io/s/fragmented-store-example-4p5dv is not relevant.
The code in the read.me does not show how to spread the code in files. (import export)
It is also not clear how you can set a value in the store in one component and see it changed in another component. (This is what the store is for, right?)

Thanks

[Aral Roca Gomez]

@Ofer-Gal

I have to use TypeScript

In version 0.5 we add the types to work well in TypeScript. It should work.

With the changes you made in 0.5.0 the example in https://codesandbox.io/s/fragmented-store-example-4p5dv is not relevant.

Yes, it's true, it needed to be updated. I just did it, thanks for reminding me. I hope it's clearer now.

As we are still in version 0.x some breaking changes have been made without changing to 1.0 yet with the intention of improving the library. This is likely to have led to confusion over the name change.

These are 2 releases with breaking changes:

• 0.4
  • Instead of useUsername now is useStore.username(). This allow multi fragment userStore.cart.price(). And for all store is useStore().
• 0.5
  • We renamed Provider to Store because after the reimplementation it is no longer mandatory to use it because it is no longer a provider, it only makes sense to redefine the store and callbacks. In the future, it will surely have more features.

The code in the read.me does not show how to spread the code in files. (import export)
It is also not clear how you can set a value in the store in one component and see it changed in another component. (This is what the store is for, right?)

This is something to keep in mind. Thank you. I will improve the documentation this week.

If the same components use the same part of the store they are subscribed to the changes made by the other components on this part of the store.

For example:

store.js

export const { Store, useStore } = createStore({ cart: { price: 0, items: [] })

CartPrice.js

import { useStore } from './store'

export default function CartPrice() {
  const [price, setPrice] = useStore.cart.price()
  return <div>{price}</div>
}

IncrementPrice.js

import { useStore } from './store'

export default function IncrementPrice() {
  const [price, setPrice] = useStore.cart.price()
  return <button onClick={setPrice(v => v+1)}>Increment cart price</button>
}

IncrementPrice and CartPrice components are re-rendered always that the cart.price change, the whole cart, or the whole store. If there is another component that updates the cart.items with useStore.cart.items(), neither of the two components will be rerendered.

I hope I have clarified something.

[Ofer Gal]

Yes this makes it super clear.
Thank you

[Ofer Gal]

This is the best ever state management utility! so simple to use and always available.
Move over Redux :-)