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

TODO creator

import React from 'react'
import ReactDOM from 'react-dom'
import {createEffect, createStore, createEvent, sample} from 'effector'
import {useStore, useList} from 'effector-react'

function createTodoListApi(initial: string[] = []) {
    const insert = createEvent<string>('insert');
  const remove = createEvent<number>('remove');
  const change = createEvent<string>('change');
  const reset = createEvent<void>('reset');
  const todos = createStore<string[]>(initial);
  const input = createStore<string>('');
  todos.on(insert, (state, value) => [...state, value]);
  todos.on(remove, (state, index) => state.filter((_, i) => i !== index));
  input.on(change, (state, value) => value);
  input.on(reset, () => '');
  input.on(insert, () => '');
  
  const submit = createEvent()
  submit.watch(e => e.preventDefault())
  
  sample({
    source: input,
    clock: submit,
    target: insert,
  })
  
  return {
    list: todos,
    submit,
    input,
    remove,
    change: change.prepend(e => e.currentTarget.value),
    reset,
    }
}

const firstTodoList = createTodoListApi(['hello, world!'])
const secondTodoList = createTodoListApi(['hello, world!'])

function TodoList({label, model}) {
    const input = useStore(model.input);
  const todos = useList(model.list, (value, index) => (
    <li>
      {value} <button type="button" onClick={() => model.remove(index)}>Remove</button>
    </li>
  ));
  return (
    <>
      <h1>{label}</h1>
      <ul>
        {todos}
      </ul>
      <form>
        <label>Insert todo: </label>
        <input type="text" value={input} onChange={model.change}/>
        <input type="submit" onClick={model.submit} value="Insert"/>
      </form>
    </>
  );
}

function App() {
  return (
    <>
        <TodoList
        label="First todo list"
        model={firstTodoList}
      />
      <TodoList
        label="Second todo list"
        model={secondTodoList}
      />
    </>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'))
← Gate: a bridge between props and storeExample: Dynamic form schema →
Effector
Docs
Getting StartedAPI Reference
Community
User ShowcaseStack OverflowGitterTwitter
More
GitHubStar
Copyright © 2019 zerobias