v28
Addons
Guides
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
1
import { createOvermind } from 'overmind'
2
import { createMixin } from 'overmind-svelte'
3
4
const overmind = {
5
state: {
6
count: 0
7
},
8
actions: {
9
increase({ state }) {
10
state.count++;
11
},
12
decrease({ state }) {
13
state.count--;
14
}
15
}
16
}
17
18
const store = createMixin(createOvermind(overmind))
19
20
export const state = store.state
21
export const actions = store.actions
Copied!
1
<script>
2
import { state, actions } from './overmind.js'
3
4
$: count = $state.count
5
</script>
6
7
<p>Count: {count}</p>
8
<button id="increase" on:click={() => actions.increase()}>Increase</button>
9
<button id="decrease" on:click={() => actions.decrease()}>Increase</button>
Copied!
Reactions
1
import { createOvermind } from 'overmind'
2
import { createMixin } from 'overmind-svelte'
3
4
const overmind = {
5
state: {
6
count: 0
7
},
8
actions: {
9
increase({ state }) {
10
state.count++;
11
},
12
decrease({ state }) {
13
state.count--;
14
}
15
}
16
}
17
18
const store = createMixin(createOvermind(overmind))
19
20
export const state = store.state
21
export const actions = store.actions
22
export const reaction = store.reaction
Copied!
1
<script>
2
import { state, actions, reaction } from './overmind.js'
3
4
$: count = $state.count
5
6
let doubled = undefined
7
8
reaction(
9
(state) => state.count,
10
(value) => {
11
doubled = value * 2
12
},
13
{
14
immediate: true
15
}
16
)
17
</script>
18
19
<p>Count: {count}</p>
20
<p>Doubled: {doubled}</p>
21
<button id="increase" on:click={() => actions.increase()}>Increase</button>
22
<button id="decrease" on:click={() => actions.decrease()}>Increase</button>
Copied!
Last modified 10mo ago
Copy link