Получение бесконечного цикла, используя цикл-IDB с текстовым полем для ввода - PullRequest
Новая
       11

Получение бесконечного цикла, используя цикл-IDB с текстовым полем для ввода

0 голосов
/ 22 сентября 2018

Я пытался создать простое тестовое приложение, которое принимает пользовательский ввод из текстового поля, отображает его, а также сохраняет его с помощью cycle-idb .Но я продолжаю падать в бесконечные циклы, независимо от того, что я делаю.

Вот вся основная функция: 

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$,
  };
}

Я пытаюсь использовать MVI и использовать TodoMVC в качестве примера, но яне могу понять, как управлять циклическими зависимостями без создания этого бесконечного цикла.

Буду очень признателен за любые советы или ссылки на другие ссылки.

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

К сожалению, первый ответ приводит к прерыванию потока обновлений базы данных.

В gitter @ janat08 предложил следующие изменения в функции persist, которые сработали для меня: 

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

Еще не пометил это как решениетак что у Яна есть шанс отредактировать свое решение, или, если кто-то придет с менее хакерским решением.

0 голосов
/ 24 сентября 2018

Хак для этого - использовать dropRepeats для глубокого сравнения.

Ответ от gitter, который указывает на «оптимизированное» решение: 

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()
};
...