view.js

import React from 'react'
import { useStore } from 'effector-react'

import { $todo, $todos, submitPressed, inputChanged, todoToggled, todoRemoved } from './stores'

export const TodoInput = () => {
  // Use useStore(store) hook to get the state
  // And update the component on state changes
  const todo = useStore($todo)
  
  return (
    <input value={todo} onChange={evt => inputChanged(evt.target.value)} />
  )
}

export const TodoForm = () => {
  return (
    <form onSubmit={submitPressed}>
      <TodoInput />
      <button>Add</button>
    </form>
  )
}

export const TodoList = () => {
  const todos = useStore($todos)
  
  return (
    <div>
      {todos.map((todo, idx) => ( 
        <div key={idx}>
          <input type="checkbox" value={todo.completed} onChange={() => todoToggled(idx)} />
          <span>{todo}</span>
          <button onClick={() => todoRemoved(idx)}>X</button>
        </div>
       ))}
    </div>
  )
}

export const TodoApp = () => {
  return (
    <div>
      <TodoForm />
      <TodoList />
    </div>
  )
}