1

我一直在尝试创建一个简单的测试应用程序，该应用程序从文本字段中获取用户输入，显示它，并使用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 作为示例，但我无法弄清楚如何在不创建无限循环的情况下管理循环依赖项。

任何建议或指向其他参考资料将不胜感激。

4

2 回答 2

0

不幸的是，第一个答案导致中断数据库更新流。

在 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)
  });
};

尚未将此标记为解决方案，因此 Jan 有机会编辑他的解决方案，或者如果有人提出了一个不那么 hacky 的解决方案。

于 2018-10-01T22:07:21.167 回答
0

对此的破解是使用 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()
};
于 2018-09-24T15:23:31.120 回答