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.
The hack to this is to use dropRepeats doing deep comparison.
The answer from gitter that points to "optimized" solution: