Getting infinite loop using cycle-idb with text field for input

Question

I've been trying to create a simple test app that takes user input from a text field, displays it, and also persists it with cycle-idb. But I keep falling into infinite loops, no matter what I do.

Here's the whole main function:

function intent(domSources) {
  return domSources.select('.name')
    .events('input')
    .map(ev => ev.target.value);
};

function model(input$, db$) {
  const log$ = db$;
  return xs.combine(input$, log$)
    .map(([input, logs]) => {
      return {
        id: 1,
        name: input,
      }
    }).startWith({id: 1, name: ""});
};

function view(state$) {
  return state$.map(log => {
    return (
      <div>
        <label for='name'>Name: </label>
        <input 
          className='name' 
          type='text' 
          value={log.name}
          placeholder="Enter a log name"
        />
        <p>{log.name}</p>
      </div>
    )
  });
};

function persist(state$) {
  return state$.map(log => {
    return $put('logs', log)
  });
};

export function main (sources) {
  const db$ = sources.IDB.store('logs').getAll();
  const input$ = intent(sources.DOM);
  const state$ = model(input$, db$);
  const vtree$ = view(state$);
  const updateDb$ = persist(state$);

  return {
    DOM: vtree$,
    IDB: updateDb$,
  };
}

I'm trying use the MVI and using TodoMVC as an example but I can't figure out how to manage the circular dependencies without creating that infinite loop.

Any advice or pointers to other references would be much appreciated.

It shouldnt make a difference, but can you try instead of `take(1)` and `combine` to use `sampleCombine`? — Jan van Brügge, Sep 22 '18 at 08:50
thanks @JanvanBrügge, yea, may not, though I feel like my issue does concern being able to take an update from the db once, and from then on, only update the db, and not the other way around. — James Gaehring, Sep 23 '18 at 13:23
edited this to remove `take(1)`... wrong version of the code, which stops the infinite loop, but breaks the db updates — James Gaehring, Sep 23 '18 at 15:31

janat08 · Answer 1 · 2018-10-04T22:29:10.687

0

The hack to this is to use dropRepeats doing deep comparison.

The answer from gitter that points to "optimized" solution:

function model(input$, db$) {
  return xs.merge(xs.never(), db$.take(1)).map(name => {
    return input$.startWith(name).map(name => {
      return { id: 1, name }
    })
  }).flatten()
};

edited Oct 04 '18 at 22:29

answered Sep 24 '18 at 15:23

janat08

1,725
2
16
27

Unfortunately this produces more errors in the database. First, it initializes the name property as an empty array, but then doesn't update the db after that. Seems like the `take(1)` is still terminating the stream to the database sink, though that still doesn't make sense to me. – James Gaehring Sep 25 '18 at 22:16
the best working version I've come to yet is this: https://github.com/jgaehring/farmos-cycle/blob/master/src/app.jsx . I'm using dropRepeats in the persist function, at your recommendation. Do you want to use this to edit your answer so I can accept it? You're def due the credit! :) – James Gaehring Sep 25 '18 at 22:22
added infinite stream to take(), hopefully it won't terminate as there's a special symbol for that to happen. – janat08 Sep 30 '18 at 13:07
still the same problem. :/ – James Gaehring Oct 01 '18 at 21:12

score 0 · Answer 2 · answered Oct 01 '18 at 22:07

Unfortunately the first answer results in breaking the stream of updates to the database.

In gitter, @janat08 suggested the following changes to the persist function, which did work for me:

function persist(state$) {
  return state$.compose(dropRepeats((x, y) => {
    return x.id === y.id && x.name === y.name;
  })).map(log => {
    return $put('logs', log)
  });
};

Not marking this as the solution yet, so Jan has a chance to edit his solution, or if someone comes up wiht a less hacky solution.

Getting infinite loop using cycle-idb with text field for input

2 Answers2