SodiumFRP + React (sodium-reaction)

[dandrei]

Hey everyone,

Here's my crack at getting ReactJS and SodiumFRP to work together. The repo includes the two examples (#1 + / - value increment/decrement, #2 summing from two input boxes), as well as a README.

UI and logic are completely separated. For every FRP piece of logic there's an example of how it would be done only with React (you can plug in either one).

I let React handle the DOM, and got Sodium to handle events and state in a headless React component.

Input is welcome. This is just a minimal setup that works fine with the two examples, but isn't quite yet ready for more complex situations

https://github.com/dandrei/sodium-reaction

[dandrei]

One thing I'd like to be able to do, but I don't know how yet, is to combine the functionality of the two examples:

• Have + / - buttons which increment or decrement a number.
• Have N cells (N = the above number) that you then sum.

Doing it with a fixed number of cells is straightforward, but I'm not sure how to go about adding and removing cells from a "pipeline", after the initial setup.

[dakom]

Nice work!

I also dabbled with this quite a bit... in the end, I found that there was too much overlap between React and Sodium, so I ended up ditching one or the other - but your mileage may vary!

One thing I didn't see in the example is where are you calling listen()?

Fwiw I had something like the following (roughly):

onComponentDidMount() {
  this.cleanup = makeFrp().listen(updates => this.setState({updates}));
}

onComponentWillUnmount() {
  this.cleanup();
}

This sort of setup also led me to some quirky bugs, and at the end of the day it turned out that I wasn't using Sodium for much more than a fancy global state (like Redux), and it ended up being cleaner just to use the new Context API

On the other hand, a large part of why it was limited is because the app ditched some of the features that I originally planned (time-based animation, for example).

(even with just Context, I'm still using a functional approach though - i.e. there is one global state sitting at the top of the tree, and it's updated via pure functions and partial.lenses)

[dakom]

Doing it with a fixed number of cells is straightforward, but I'm not sure how to go about adding and removing cells from a "pipeline", after the initial setup.

Not sure what the proper best way is, but you could make a function that lets you lift an arbitrary number of Cells together. Something like (untested):

const liftN = <T> (fn:(a:T,b:T) => T) => (xs:Array<Cell<T>>) => xs.reduce((acc, c) => {
  acc = acc.lift(c, fn);
  return acc;
}, new Cell<T>());

However - even if that works (which I'm not sure about), generally speaking I think it's better to try and have Cell<Array> rather than Array<Cell>, for performance reasons.

[dandrei]

Hey, thanks!

listen() listen is called internally, inside the constructor of the headless component.

I like your approach as well, I was wondering how to deal with cleaning up the FRP code, as I hadn't touched the documentation in a while.

[Ziriax]

You might want to take a look at my old experiment and sodium-frp-react library

It is a bit overly complicated as it is right now, and nobody uses it, but it has dynamic collections of cells

[dandrei]

The suggestions offered in this thread helped me move forward.

What I wanted to do next was to combine the two basic examples:
- increment / decrement a value
- incrementing this value adds an input box
- decrementing this value removes an input box
- compute the sum from an arbitrary number of input boxes
- remove specific input boxes on demand

I ended up using a Cell<Array>, instead of Array<Cell>.

The fun part came when I had to update the Array inside the Cell.

I ended up generating four different function streams (Stream<Function>, each corresponding to one possible action on the data: add, change, remove specific, remove last) which I first merged, then accumulated the Cell<Array> on.

FRP

type Input = { key: number, value: number };

export default function () {
    let id = 0;
    const newKey = () => id++;

    // +/-
    const i$ = new StreamSink<number>();
    const d$ = new StreamSink<number>();

    // triggered from UI
    const change$ = new StreamSink<Input>();
    const remove$ = new StreamSink<number>();

    // function streams
    const inc$: Stream<Function> = i$.map(_ => s => [...s, {key: newKey(), value: 0}]);
    const dec$: Stream<Function> = d$.map(dec => s => s.slice(0, s.length + dec));
    const chg$: Stream<Function> = change$.map(chg => s => s.map(t => t.key === chg.key ? chg : t));
    const rmv$: Stream<Function> = remove$.map(key => s => s.filter(i => i.key !== key));

    const inputs: Cell<Array<Input>> = inc$
        .orElse(dec$)
        .orElse(chg$)
        .orElse(rmv$)
        .accum([], (f, s) => f(s));

    const sum: Cell<number> = inputs.map(arr => arr.reduce((v, i) => v + i.value, 0));
    const count: Cell<number> = inputs.map(s => s.length);

    return sodiumReaction({
            up: () => i$.send(1),
            dn: () => d$.send(-1),
            change: k => e => change$.send({key: k, value: validNumber(e.target.value)}),
            remove: k => _ => remove$.send(k),
        },
        {count, sum, inputs}
    );
};

UI

export default (props) => (
    <Provider>
        {({up, dn, change, remove, state: {count, inputs, sum}}) => (
            <Fragment>
                <div>
                    <button onClick={up}>+</button>
                    <button onClick={dn}>-</button>
                </div>
                <div>
                    Inputs: {count} Sum: {sum}
                </div>
                <Fragment>
                    {inputs.map(({key, value}) => <div>
                        <input value={value} key={key} onChange={change(key)}/>
                        <button onClick={remove(key)}>x</button>
                    </div>)}
                </Fragment>
            </Fragment>
        )}
    </Provider>
);

[dandrei]

I've updated the example to use the latest SodiumFRP and CRA versions, and made all components functional.