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: Effects

import React from 'react'
import ReactDOM from 'react-dom'

import {createEffect, createStore} from 'effector'
import {createComponent} from 'effector-react'

const asyncAction = createEffect('your async action')

asyncAction.use(url => fetch(url).then(req => req.json()))

const currentUser = createStore(null)
    .on(asyncAction.done, (state, {result}) => result.username)

const CurrentUser = createComponent(
  currentUser, (props, user) => user
    ? <div>current user: {user}</div>
    : <div>no current user</div>
  )

const url = 'https://gist.githubusercontent.com/zerobias/24bc72aa8394157549e0b566ac5059a4/raw/b55eb74b06afd709e2d1d19f9703272b4d753386/data.json' 


const node = document.createElement('div')
document.body.appendChild(node)
ReactDOM.render(<>
  <button onClick={() => asyncAction(url)}>load user</button>
  <CurrentUser/>  
</>, node)
← ExampleReact Native Example →
Effector
Docs
Getting StartedAPI Reference
Community
User ShowcaseStack OverflowGitterTwitter
More
GitHubStar
Copyright © 2019 zerobias