When we manage global states in frontend, for example, in React, we use React Hooks or Redux in most cases.
But the implementation of Rudux is complecated and redanduncy. Although React Hooks is somewhat better in that respect, I want to do that more easiliy!
I often used to use React on my personal project a few years ago. However, the global state management is very annoying for me and that’s why I decided to change the framework from React to Svelte (Although, strictly speaking, Svelte isn’t a framework, it’s a compiler).
The management of global states in Svelte is much easier than that in React.
Let’s explain in order.
npx degit sveltejs/template my-project
See the official page.
The file name is arbitrary like stores.js or globalState.js, etc.
By doint this, we can use this value(myName here) and change it anywhere/anytime in project.
We can use global state values by adding prefix($) to them. For example, in Home.svelte:
It’s also pretty easy to change states.
All we have to do is import global states and assign new values to them. For example, in About.svetle:
Once experience this, it’s simple and easy enough to hesitate to use other frontend frameworks.
It also works SvelteKit by the way.