跳到主要内容

Counter

import React from 'react'
import ReactDOM from 'react-dom'
import {createEvent, createStore, combine} from 'effector'
import {useStore} from 'effector-react'

const plus = createEvent()

const $counter = createStore(1).on(plus, n => n + 1)
const $counterText = $counter.map(n => `current value = ${n}`)
const $counterCombined = combine({counter: $counter, text: $counterText})

const App = () => {
const counter = useStore($counter)
const counterText = useStore($counterText)
const counterCombined = useStore($counterCombined)

return (
<div>
<button onClick={plus}>Plus</button>
<div>counter: {counter}</div>
<div>counterText: ${counterText}</div>
<div>counterCombined: {counterCombined.counter}, {counterCombined.text}</div>
</div>
)
}

ReactDOM.render(<App />, document.getElementById('root'))

Try it