Effector

Effector

  • Docs
  • Try
  • API
  • Blog
  • GitHub

›React

Introduction

  • Installation
  • Core Concepts
  • Prior Art

Recipes

  • Recipes: Index
  • Usage with TypeScript
  • Migrating to Effector

    • From Redux

    React

    • Example
    • Example: Effects

    React Native

    • React Native Example

Other

  • Troubleshooting
  • Glossary

FAQ

  • FAQ
Edit

Example

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

const plus = createEvent()

const int = createStore(1)
  .on(plus, n => n + 1)
const text = int.map(
  n => `current value = ${n}`
)
const data = createStoreObject({int, text})

const IntView = createComponent(data, ({}, {int, text}) => (
  <div>n = {int}</div>
))

const IntHook = () => {
  const {text} = useStore(data)
  return (
    <div>{text}</div>
  )
}

const App = () => (
  <div>
    <button onClick={plus}>click</button>
    <IntView/>
    <IntHook/>
  </div>
)

const div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(
  <App/>,
  div
)
← From ReduxExample: Effects →
Effector
Docs
Getting StartedAPI Reference
Community
User ShowcaseStack OverflowGitterTwitter
More
GitHubStar
Copyright © 2019 zerobias