grammarly/embrace

How do you handle inputs with it?

Closed this issue · 5 comments

I've created a simple textarea without any logic except saving typed text in the state, and for it to work, I need to call the pluck method with any random property value. My question is: am I wrongly getting value from action, and if yes, how do I do it right?

Screenshot 2022-11-09 at 21 29 25

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!