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