Effector

Effector

  • Docs
  • Try
  • API
  • Blog
  • Twitter
  • GitHub

›React

Introduction

  • Installation
  • Core Concepts
  • Prior Art

Recipes

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

    • From Redux

    React

    • Example
    • Example: Effects
    • Example: Forms
    • Gate: a bridge between props and store
    • Example: TODO creator
    • Example: Dynamic form schema

    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