Svelte Stores vs Redux: Which State Management Approach Is Simpler?
Problem
I was choosing a state management solution for my web application. Redux felt complex with its action/reducer pattern, and I wondered if there was a simpler alternative.
From Reddit, a developer shared:
“In company where I am working use svelteKit. I agree with you that very good framework. I like a lot stores for me it more simple and better solve that redux or other state managers”
This made me curious about how much simpler Svelte stores could be.
Environment
- SvelteKit with built-in stores
- Redux with React
- Various application sizes
What happened?
Redux Complexity
Redux requires understanding multiple concepts:
- Store, actions, reducers, dispatch, selectors, middleware
Redux Counter Example:
export const INCREMENT = 'INCREMENT'export const DECREMENT = 'DECREMENT'
export const increment = () => ({ type: INCREMENT })export const decrement = () => ({ type: DECREMENT })import { INCREMENT, DECREMENT } from './actions'
const initialState = { count: 0 }
export const counterReducer = (state = initialState, action) => { switch (action.type) { case INCREMENT: return { ...state, count: state.count + 1 } case DECREMENT: return { ...state, count: state.count - 1 } default: return state }}import { createStore } from 'redux'import { counterReducer } from './reducer'export const store = createStore(counterReducer)import { useDispatch, useSelector } from 'react-redux'import { increment, decrement } from './actions'
function Counter() { const count = useSelector(state => state.count) const dispatch = useDispatch()
return ( <div> <p>Count: {count}</p> <button onClick={() => dispatch(increment())}>+</button> <button onClick={() => dispatch(decrement())}>-</button> </div> )}Svelte Stores Simplicity
Only 3 concepts: writable, readable, derived
Svelte Counter Example:
import { writable } from 'svelte/store'export const count = writable(0)<script> import { count } from './stores.js'</script>
<p>Count: {$count}</p><button on:click={() => $count++}>+</button><button on:click={() => $count--}>-</button>The $ prefix provides automatic subscription and unsubscription.
Lines of Code Comparison
| Task | Redux | Svelte Stores | Reduction |
|---|---|---|---|
| Simple Counter | ~40 lines | ~10 lines | 75% less |
| Async Data | ~80 lines | ~15 lines | 81% less |
| Computed Values | ~50 lines | ~5 lines | 90% less |
| Store Setup | ~30 lines | ~3 lines | 90% less |
How does it work?
Writable Stores
import { writable } from 'svelte/store'
const count = writable(0)
// Three simple methods:count.subscribe(value => console.log(value)) // Listencount.set(10) // Set directlycount.update(n => n + 1) // Update functionDerived Stores
import { derived } from 'svelte/store'
// Derive from single storeconst doubled = derived(count, $count => $count * 2)
// Derive from multiple storesconst fullname = derived( [firstName, lastName], ([$first, $last]) => `${$first} ${$last}`)When to Choose Each
Choose Svelte Stores if:
- Small to medium-sized applications
- Team prioritizes developer experience
- Want less boilerplate
- Don’t need Redux middleware ecosystem
Choose Redux if:
- Large enterprise applications
- Complex state interactions
- Team already experienced with Redux
- Need time-travel debugging
The reason
Svelte stores are built into the framework with a minimal API. The $ prefix provides automatic reactivity, eliminating manual subscription management.
Summary
In this post, I compared Svelte stores and Redux. The key point is Svelte stores offer a dramatically simpler state management approach with 70-90% less code, making them ideal for most applications while Redux suits complex enterprise needs.
Final Words + More Resources
My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me
Here are also the most important links from this article along with some further resources that will help you in this scope:
- 👨💻 Svelte Stores Documentation
- 👨💻 Redux Official Documentation
- 👨💻 Reddit Discussion: SvelteKit Stores
Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!
Comments