Как управлять состоянием без использования предметных или императивных манипуляций в простом примере RxJS?
Я экспериментирую с RxJS уже две недели, и хотя мне это в принципе нравится, я просто не могу найти и реализовать правильный шаблон для управления состоянием. Все статьи и вопросы, кажется, согласны:
Subject
следует избегать, где это возможно, в пользу простого проталкивания состояния через преобразования;.getValue()
следует полностью исключить; а также.do
возможно, следует избегать, за исключением манипуляций с DOM?Проблема со всеми такими предложениями заключается в том, что ни в одной литературе не говорится прямо о том, что вы должны использовать вместо этого, кроме «вы изучите путь Rx и перестанете использовать тему».
Но я нигде не могу найти прямого примера, который бы конкретно указывал на правильный способ выполнения как добавления, так и удаления для одного потока / объекта, как следствие множества других входных данных потока, без сохранения состояния и функциональным способом.
Прежде чем я снова укажу в том же направлении, проблемы с открытой литературой:
Введение в реактивное программирование. Вы пропустили: отличный начальный текст, но он конкретно не отвечает на эти вопросы.Пример TODO для RxJS поставляется с React и включает в себя явное манипулированиеSubject
s в качестве прокси для React Stores.http://blog.edanschwartz.com/2015/09/18/dead-simple-rxjs-todo-list/ : явно используетstate
объект для добавления и удаления предметов.Моя, пожалуй, десятая переписка стандартного TODO приведена ниже. Мои предыдущие итерации включают в себя:
начинать с изменяемого массива 'items' - плохо, так как состояние явно и обязательно управляетсяс помощьюscan
объединить новые элементы вaddedItems$
поток, затем ветвится другой поток, где были удалены удаленные элементы - плохо какaddedItems$
Поток будет расти бесконечно.обнаружениеBehaviorSubject
и используя это - казалось плохим, так как для каждого новогоupdatedList$.next()
эмиссии, требуется предыдущее значение для повторения, а это означает, чтоSubject.getValue()
необходимо.пытаясь передать результатinputEnter$
события добавления в отфильтрованные события удаления - но затем каждый новый поток создает новый список, а затем передает его вtoggleItem$
а такжеtoggleAll$
Потоки означают, что каждый новый поток зависит от предыдущего, и поэтому для выполнения одного из 4 действий (добавить, удалить, переключить элемент или переключить все) требуется, чтобы вся цепочка без необходимости проходилась снова.Теперь я прошел полный круг, где я вернулся к использованию обоихSubject
(и как это должно быть последовательно повторено каким-либо образом без использованияgetValue()
?) а такжеdo
, как показано ниже. Я и мой коллега согласны с тем, что это самый ясный путь, но он, конечно, кажется наименее реагирующим и наиболее необходимым. Любые четкие предложения о правильном пути для этого будут высоко оценены!
import Rx from 'rxjs/Rx';
import h from 'virtual-dom/h';
import diff from 'virtual-dom/diff';
import patch from 'virtual-dom/patch';
const todoListContainer = document.querySelector('#todo-items-container');
const newTodoInput = document.querySelector('#new-todo');
const todoMain = document.querySelector('#main');
const todoFooter = document.querySelector('#footer');
const inputToggleAll = document.querySelector('#toggle-all');
const ENTER_KEY = 13;
// INTENTS
const inputEnter$ = Rx.Observable.fromEvent(newTodoInput, 'keyup')
.filter(event => event.keyCode === ENTER_KEY)
.map(event => event.target.value)
.filter(value => value.trim().length)
.map(value => {
return { label: value, completed: false };
});
const inputItemClick$ = Rx.Observable.fromEvent(todoListContainer, 'click');
const inputToggleAll$ = Rx.Observable.fromEvent(inputToggleAll, 'click')
.map(event => event.target.checked);
const inputToggleItem$ = inputItemClick$
.filter(event => event.target.classList.contains('toggle'))
.map((event) => {
return {
label: event.target.nextElementSibling.innerText.trim(),
completed: event.target.checked,
};
})
const inputDoubleClick$ = Rx.Observable.fromEvent(todoListContainer, 'dblclick')
.filter(event => event.target.tagName === 'LABEL')
.do((event) => {
event.target.parentElement.classList.toggle('editing');
})
.map(event => event.target.innerText.trim());
const inputClickDelete$ = inputItemClick$
.filter(event => event.target.classList.contains('destroy'))
.map((event) => {
return { label: event.target.previousElementSibling.innerText.trim(), completed: false };
});
const list$ = new Rx.BehaviorSubject([]);
// MODEL / OPERATIONS
const addItem$ = inputEnter$
.do((item) => {
inputToggleAll.checked = false;
list$.next(list$.getValue().concat(item));
});
const removeItem$ = inputClickDelete$
.do((removeItem) => {
list$.next(list$.getValue().filter(item => item.label !== removeItem.label));
});
const toggleAll$ = inputToggleAll$
.do((allComplete) => {
list$.next(toggleAllComplete(list$.getValue(), allComplete));
});
function toggleAllComplete(arr, allComplete) {
inputToggleAll.checked = allComplete;
return arr.map((item) =>
({ label: item.label, completed: allComplete }));
}
const toggleItem$ = inputToggleItem$
.do((toggleItem) => {
let allComplete = toggleItem.completed;
let noneComplete = !toggleItem.completed;
const list = list$.getValue().map(item => {
if (item.label === toggleItem.label) {
item.completed = toggleItem.completed;
}
if (allComplete && !item.completed) {
allComplete = false;
}
if (noneComplete && item.completed) {
noneComplete = false;
}
return item;
});
if (allComplete) {
list$.next(toggleAllComplete(list, true));
return;
}
if (noneComplete) {
list$.next(toggleAllComplete(list, false));
return;
}
list$.next(list);
});
// subscribe to all the events that cause the proxy list$ subject array to be updated
Rx.Observable.merge(addItem$, removeItem$, toggleAll$, toggleItem$).subscribe();
list$.subscribe((list) => {
// DOM side-effects based on list size
todoFooter.style.visibility = todoMain.style.visibility =
(list.length) ? 'visible' : 'hidden';
newTodoInput.value = '';
});
// RENDERING
const tree$ = list$
.map(newList => renderList(newList));
const patches$ = tree$
.bufferCount(2, 1)
.map(([oldTree, newTree]) => diff(oldTree, newTree));
const todoList$ = patches$.startWith(document.querySelector('#todo-list'))
.scan((rootNode, patches) => patch(rootNode, patches));
todoList$.subscribe();
function renderList(arr, allComplete) {
return h('ul#todo-list', arr.map(val =>
h('li', {
className: (val.completed) ? 'completed' : null,
}, [h('input', {
className: 'toggle',
type: 'checkbox',
checked: val.completed,
}), h('label', val.label),
h('button', { className: 'destroy' }),
])));
}
редактироватьЧто касается очень полезного ответа @ user3743222, я могу видеть, как представление состояния в качестве дополнительного ввода может сделать функцию чистой и, таким образом,scan
это лучший способ представить коллекцию, развивающуюся с течением времени, с моментальным снимком ее предыдущего состояния до этого момента в качестве дополнительного параметра функции.
Тем не менее, это было то, как я подошел ко второй попытке, сaddedItems$
будучи отсканированным потоком входов:
// this list will now grow infinitely, because nothing is ever removed from it at the same time as concatenation?
const listWithItemsAdded$ = inputEnter$
.startWith([])
.scan((list, addItem) => list.concat(addItem));
const listWithItemsAddedAndRemoved$ = inputClickDelete$.withLatestFrom(listWithItemsAdded$)
.scan((list, removeItem) => list.filter(item => item !== removeItem));
// Now I have to always work from the previous list, to get the incorporated amendments...
const listWithItemsAddedAndRemovedAndToggled$ = inputToggleItem$.withLatestFrom(listWithItemsAddedAndRemoved$)
.map((item, list) => {
if (item.checked === true) {
//etc
}
})
// ... and have the event triggering a bunch of previous inputs it may have nothing to do with.
// and so if I have 400 inputs it appears at this stage to still run all the previous functions every time -any- input
// changes, even if I just want to change one small part of state
const n$ = nminus1$.scan...
Очевидное решение было бы просто иметьitems = []
и манипулировать им напрямую, илиconst items = new BehaviorSubject([])
- но тогда кажется, что единственный способ повторить этоgetValue
выставить предыдущее состояние, которое Андре Стальц (CycleJS) прокомментировал в проблемах RxJS, как нечто, что не должно быть действительно разоблачено (но опять же, если нет, то как его можно использовать?).
Я думаю, у меня только что была идея, что с потоками вы не должны были использовать Предметы или представлять что-либо через состояние «фрикадельки», и в первом ответе я не уверен, как это не вводит массовые цепочки потоков, которые осиротевшие / бесконечно растущие / должны строиться друг на друге в точной последовательности.