How do you handle inputs with it?
Closed this issue · 5 comments
If I understand correctly what you are trying to achieve, you don't need a pluck
at all.
The Flow
is an Observable
mapping from action to state.
In your case, the mapping can look like:
actions.pipe(
Rx.startWith('initial value'),
Rx.map(action => {
// here we need to transform action into the new state
const newState = action
return newState
})
)
But since the action and the state has the same type, and the action already contains the new state, the mapping can be skipped:
const textareaFlow: Flow.For<typeof Textarea> = (actions: Observable<string>) => actions.pipe(
Rx.startWith('initial value')
)
or even:
const textareaFlow: Flow.For<typeof Textarea> = Rx.startWith('initial value')
@akryvomaz, thank you for the quick answer!
But the issue is that all of the three described options above don't work - because the value in textarea doesn't change (you type, but it always remains initial value
)
I think the problem you are having is because notify has type IO<void>
(this makes it easier to use it in case when event handler does not need to transform the event, e.g. onClick={notify('clicked')}
can be used instead of onClick={() => notify('clicked')()}
)
So you need to do it like this:
<F.textarea
value={state}
onChange={(e) => {
// notify is IO<void>, so need to call it as `notify(action)()` !
notify(e.currentTarget.value)();
}}
/>
Here is a code sandbox
@yevhey JFYI I recommend using https://github.com/buildo/eslint-plugin-fp-ts/blob/main/docs/rules/no-discarded-pure-expression.md, so you don't suffer anymore from uncalled IO
operations
Thank you all!