Перейти к основному содержимому

TODO creator

Try it

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, createEvent, sample} from 'effector'
import {useStore, useList} from 'effector-react'
function createTodoListApi(initial: string[] = []) {
const insert = createEvent<string>()
const remove = createEvent<number>()
const change = createEvent<string>()
const reset = createEvent<void>()
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({
clock: submit,
source: input,
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'))
Последнее обновление