// ./components/AppRoot.tsx
import React, { useCallback } from 'react'
import { useComponentContext, useStore } from '@ragg/fleur-react'
import { increaseOp } from './operations'

export const AppRoot = props => {
  const context = useComponentContext()

  const { count } = useStore([CountStore], getStore => ({
    count: getStore(CountStore).getCount(),
  }))

  const handleCountClick = useCallback(() => {
    context.executeOperation(increaseOp)
  }, [])

  return <div onClick={handleCountClick}>{count}</div>
}

// ./components/AppRoot.tsx

import React from 'react'

import {
  createElementWithContext,
  connectToStores,
  withComponentContext,
} from '@ragg/fleur-react'
import { increaseOp } from './operations'
import CountStore from './stores/CountStore'

export default withComponentContext(
  // pick Props from Store with `connectToStores()`
  connectToStores([CountStore], getStore => ({
    count: getStore(CountStore).getCount(),
  }))(
    class AppRoot extends React.PureComponent {
      private handleCountClick = () => {
        // ** `this.props.{executeOperation, getStore}` provide by `withComponentContext()`
        this.props.executeOperation(increaseOp)
      }

      render() {
        return <div onClick={this.handleCountClick}>{this.props.count}</div>
      }
    },
  ),
)

import Fleur, { Store, listen, operation, action } from '@ragg/fleur'
import { createElementWithContext, FleurContext } from '@ragg/fleur-react'
import AppRoot from './components/AppRoot'
import CountStore from './stores/CountStore'

const app = new Fleur({ stores: [ CountStore ] })

const context = app.createContext()
ReactDOM.render(<FleurContext value={context}><AppRoot /></FluerContext>, {})