Is a more concise API possible?

[jbhoot]

I use this library to manage state in a project at work. I love it.

Though I wish that the react-rxjs integration interface were simpler and less verbose than it is.

Currently, a minimum of 4 variables need to be tracked for one state stream:

• handleFn to dispatch events from react component
• a stream that receives the events dispatched from a React component
• a stream the access to which can be shared across React components
• a useX hook to access a value from the shared stream

This hurdle becomes too much for newcomers.

Is there a way to simplify this interface?

[josepot]

Is there a way to simplify this interface?

I think so. Could you please provide a concrete example so that we can suggest a less verbose approach? Or perhaps we can come up with a less verbose API.

[jbhoot]

Sure, here is an example. Forgive any syntax error in the code; my original code is in ReScript (a language that transpiles to JavaScript), and I translated it to JavaScript here for convenience.

let [sValueChanged, handleValueChange] = createSignal(e => getEventValue(e));

let [useRawValue, ssRawValue] = bind(sValueChanged, '');

let [useParsedValue, ssParsedValue] = bind(
    ssRawValue.pipe(
      map(v => {
        // return Ok(int) or Error(string).
      }),
    ),
)

const Threshold = () => {
  const rawValue = useRawValue();
  const parsedValue = useParsedValue();
  const id = "ThresholdInput";
  return <div>
    <label htmlFor={id}>Threshold you would like to cover</label>
    <div>
      <input
        type="text"
        id={id}
        name={id}
        defaultValue={rawValue}
        onChange={handleValueChange}
      />
      <span>tonne/hectare</span>
    </div>
    {parsedValue.error && <p>{parsedValue.error}</p>}
  </div>
}