Skip to content

Instantly share code, notes, and snippets.

@kubk

kubk/effector-counter.ts

Last active Nov 5, 2020
Embed
What would you like to do?
mobx vs effector
import {createStore, createEvent} from 'effector'
import {useStore} from 'effector-react'
const increment = createEvent()
const decrement = createEvent()
const counter = createStore(0)
.on(increment, state => state + 1)
.on(decrement, state => state - 1)
const isOdd = counter.map(value => value % 2 === 0)
counter.watch(console.log)
const Counter = () => {
const value = useStore(counter)
const isOdd = useStore(isOdd)
return <div>{value} Is odd: {counter.isOdd}</div>
}
const App = () => {
const value = useStore(counter)
return (
<>
<Counter />
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</>
)
}
import { makeAutoObservable } from 'mobx'
import { observer } from 'mobx-react-lite'
const counter = makeAutoObservable({
value: 0,
increment() {
this.value++;
},
decrement() {
this.value--;
},
get isOdd() {
return this.value % 2 === 0;
}
})
autorun(() => console.log(counter.value))
const Counter = observer(() => {
return <div>{counter.value} Is odd: {counter.isOdd}</div>
})
const App = observer(() => {
return (
<>
<Counter />
<button onClick={counter.increment}>+</button>
<button onClick={counter.decrement}>-</button>
</>
)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment