OVERMIND
API
Discord Chat
Sponsor ♡
GitHub Repo
Search…
v28
Overmind
Introduction
Quickstart
How to learn
Videos
FAQ
Core
Devtools
Configuration
State
Actions
Effects
Operators
Server Side Rendering
Typescript
views
React
Angular
Vue
Svelte
Addons
GraphQL
Statechart
Guides
Using state machines
Using classes
Connecting components
Managing lists
State first routing
Testing
Connecting to React Native
API
action
addFlushListener
addMutationListener
createOvermind
createOvermindMock
createOvermindSSR
derived
effects
events
json
lazy
merge
namespaced
onInitializeOvermind
operators
reaction
rehydrate
statemachine
Powered By
GitBook
Svelte
There are two differente ways to connect Overmind to Svelte. You can use the
reactive declarations
or you can use the
reaction
.
When you connect Overmind to a component you ensure that whenever any tracked state changes, only components interested in that state will re-render.
Reactive declarations
import
{
createOvermind
}
from
'overmind'
import
{
createMixin
}
from
'overmind-svelte'
const
overmind
=
{
state
:
{
count
:
0
},
actions
:
{
increase
(
{
state
}
)
{
state
.
count
++
;
},
decrease
(
{
state
}
)
{
state
.
count
--
;
}
}
}
const
store
=
createMixin
(
createOvermind
(
overmind
))
export
const
state
=
store
.
state
export
const
actions
=
store
.
actions
<
script
>
import
{
state
,
actions
}
from
'./overmind.js'
$
:
count
=
$state
.
count
</
script
>
<
p
>
Count
:
{
count
}
</
p
>
<
button id
=
"increase"
on
:
click
=
{()
=>
actions
.
increase
()}
>
Increase
</
button
>
<
button id
=
"decrease"
on
:
click
=
{()
=>
actions
.
decrease
()}
>
Increase
</
button
>
Reactions
import
{
createOvermind
}
from
'overmind'
import
{
createMixin
}
from
'overmind-svelte'
const
overmind
=
{
state
:
{
count
:
0
},
actions
:
{
increase
(
{
state
}
)
{
state
.
count
++
;
},
decrease
(
{
state
}
)
{
state
.
count
--
;
}
}
}
const
store
=
createMixin
(
createOvermind
(
overmind
))
export
const
state
=
store
.
state
export
const
actions
=
store
.
actions
export
const
reaction
=
store
.
reaction
<
script
>
import
{
state
,
actions
,
reaction
}
from
'./overmind.js'
$
:
count
=
$state
.
count
let
doubled
=
undefined
reaction
(
(
state
)
=>
state
.
count
,
(
value
)
=>
{
doubled
=
value
*
2
},
{
immediate
:
true
}
)
</
script
>
<
p
>
Count
:
{
count
}
</
p
>
<
p
>
Doubled
:
{
doubled
}
</
p
>
<
button id
=
"increase"
on
:
click
=
{()
=>
actions
.
increase
()}
>
Increase
</
button
>
<
button id
=
"decrease"
on
:
click
=
{()
=>
actions
.
decrease
()}
>
Increase
</
button
>
views - Previous
Vue
Next - Addons
GraphQL
Last modified
1yr ago
Copy link
Outline
Reactive declarations
Reactions