effector-react

Effector-react

React bindings for effector

Installation

npm install --save effector effector-react

Or using yarn

yarn add effector effector-react

Usage

import {createStore, createStoreObject, createEvent} from 'effector'

import {createStoreConsumer} from 'effector-react'

const inputText = createEvent('input text')
const text = createStore('').on(inputText, (state, payload) => payload)

const length = createStore(0).on(inputText, (state, payload) => payload.length)

const store = createStoreObject({
 text,
 length,
})

const FormStore = createStoreConsumer(store)

const Form = () => (
 <FormStore>
  {state => (
   <form>
    <input
     type="text"
     onChange={e => inputText(e.currentTarget.value)}
     value={state.text}
    />
    <p>Length: {state.length}</p>
   </form>
  )}
 </FormStore>
)

Changelog

0.18.3-0.18.4

• Add version variable to public exports

import {version} from 'effector'

console.log(version)

• Add effect handler to domain 4c6ae8

• Add Unit<T> as common interface implemented by Event, Effect and Store

• Add isStore, isEvent, isEffect and isUnit validators

import {createStore, createEvent, isStore, isEvent, isUnit} from 'effector'

const event = createEvent('some event')
const $store = createStore('value')

isStore($store) // => true
isEvent($store) // => false
isUnit($store) // => true

isStore(event) // => false
isEvent(event) // => true
isUnit(event) // => true

isStore(null) // => false
isEvent(null) // => false
isUnit(null) // => false

• Add extended createStore with config

import {createStore} from 'effector'

const $store = createStore('value', {
  name: 'value store',
})

• Publish babel-plugins

• Improve naming for chrome performance timeline

• Fix typescript typings #45

• Fix event.prepend bug #35