[tinco]

Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components?

edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.

[lcrz]

Vue has `refs`, which are reactive proxy objects that are used for tracking things like re-rendering.

Since vue does not hide the fact that something is a ref, you need to call `myRef.value` to get to the underlying value of `const myRef = ref(10)`.

In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, at which point you can just use `myRef` directly. This will then be converted by the Vue SFC compiler.

Another option is to use a reactive object as the state: `const state = reactive({ myVal: 10 })`, at which point you can just use `state.myVal`.

[b0afc375b5]

> In a new and currently experimental syntax, you can use `const myRef = $ref(10)`,

Oh sweet didn't know that. I keep forgetting to type `.value` and debugging it wastes a couple of seconds here and there.

https://vuejs.org/guide/extras/reactivity-transform.html#ref...

[oefrha]

Huh, I forgot reactivity transform is already out! Meant to try it but didn't get the chance. Good thing I happen to be starting a new project today.

[solardev]

What is the `10` here? Is it a reference to the literal value `10`...?

[rk06]

It is just an initial value.

[solardev]

So ref is just a state variable with an initial value of 10? How do you mutate the variable/change the state?

[rk06]

No, $ref(10) will return a reactive object. And 10 will be the initial value of that object.

You use the object the same way you use a js variable.

let st = $ref(10)

st = st + 1 // update it and use it like if it was just "10"

But now, st is reactive.

[solardev]

Thank you for the explanation... I will have to learn a lot of basics, it looks like :)

[preommr]

In vue 2, objects are made reactive with getters/setters, so changing a field on an object can be tracked. That still exists in vue 3, but a separate api was needed for primitives like numbers or strings, without a parent object that they'be set to. Vue3's solution is to wrap it in a wrapper object called a ref, and to read it's value you have to use .value. It's a pretty simple concept.

In svelte, top level variables are automatically reactive.

[yawnxyz]

Yes! This was exactly what I felt was more "natural" in Svelte.

I also like Svelte's "writable store" model rather than React's Redux which forces data to flow a certain way, through the dispatcher.

Svelte Stores make it a little too easy to "shoot yourself in the foot" if you're not too careful though, as you can make data bi-directional, and you can make children set parent data. This makes prototyping super easy and fast, but probably creates massive code readability problems down the line, especially for larger teams.

[solardev]

These days in reactland, you can easily get app-wide state using useContext (which is much MUCH simpler to work with than Redux). It's just a global store (well, or you can limit it to a certain part of the tree) that any child or sibling can read/write to at will.

But just like you said, it can be a footgun if you're not careful.

[acemarke]

FWIW, Redux and Context are different tools that solve different problems, with some overlap.

Context is a Dependency Injection tool for a single value, used to avoid prop drilling.

Redux is a tool for predictable global state management, with the state stored outside React.

Note that Context itself isn't the "store", or "managing" anything - it's just a conduit for whatever state _you_ are managing, or whatever other value you're passing through it (event emitter, etc).

I wrote an extensive article specifically to answer this frequently asked question, including details about what the differences are between Context and Redux, and when to consider using either of them - I'd recommend reading through this:

- https://blog.isquaredsoftware.com/2021/01/context-redux-diff...

[solardev]

Thanks for sharing. I think you touch on some of the more powerful features of Redux (middleware, selectors, pass by reference instead of value, etc.)

But IMHO a lot of that is overkill when your only goal is global state. Context solves that problem very nicely (in conjunction with state and reducer, yes, but context is the big piece there). Prop drilling was a major hurdle to global state management. But redux introduces its own overhead (Flux architecture, actions and dispatches, etc.) that are unnecessarily complicated for simple state sharing.

I feel like the article spends a lot of time differentiating the specifics of use Context vs state vs reducers, but it kinda misses the bigger point... that using those is often enough and can remove redux, leaving you with more readable and less overengineered code. Redux might be the right choice for really complex states, but it's a pain to work with day to day. Context makes it super simple by comparison.

[acemarke]

I see people ask on a literal daily basis "does Context replace Redux?". So, I was trying to make a few points in that post, mostly clarifying common misconceptions, because the question itself is rooted in some major misunderstandings about what these tools even _do_ in the first place:

- that Context doesn't "manage" anything by itself, and definitely not "state"

- That there are significant technical differences between the combo of `useReducer` + `useContext` and Redux/React-Redux, in terms of render performance, data access, and usage patterns.

- That this means there are also different use cases for those tools as well.

I wouldn't use Redux to maintain state for a form or isolated chunk of the app, I'd use context + `useReducer`. On the flip side, if I do have "global" state, I would pretty quickly switch over to putting it in Redux instead.

[oefrha]

I'm talking about reactive references in the composition API; the options API is too different from Svelte to make a direct comparison. You can use reactive() to hide some .value's but they are more limited and I personally avoid them. There have been proposals to add more transformations to @vue/compiler-sfc to make refs more "magical" like Svelte.