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

effector-react 0.18.10

• Add initial props factory to createComponent

import {users} from './feature'

const UserItem = createComponent(
  initialProps => users.map(users => users[initialProps.id]),
  (_, user) => {
    return <div>{user.username}</div>
  },
)

const UserList = createComponent(users, (_, users) => {
  return users.map(user => <TodoItem key={user.id} id={user.id} />)
})

• Implicitly convert objects to createStoreObject in createComponent

const deposit = createEvent()
const $username = createStore('zerobias')
const $balance = createStore(0)

const Profile = createComponent(
  {username: $username, balance: $balance},
  (_, {username, balance}) => {
    return (
      <div>
        Hello, {username}. Your balance is {balance}
        <button onClick={deposit}>Deposit</button>
      </div>
    )
  },
)

• Add mounted and unmounted events to components created by createComponent

import {counter, increment} from './feature'

const Counter = createComponent(counter, (_, state) => {
  return (
    <div>
      {state}
      <button onClick={increment}>+</button>
    </div>
  )
})

Counter.mounted.watch(({props, state}) => {
  counter.on(increment, s => s + 1)
})

Counter.unmounted.watch(({props, state}) => {
  counter.off(increment)
})

• Replace useLayoutEffect with useIsomorphicLayoutEffect to support server-side rendering