Я знаю, что Redux - лучшая «реализация» Flux, или, точнее говоря, это редизайн для упрощения вещей (управление состоянием приложения).
Я много слышал о реактивном программировании (RxJS), но еще не погрузился в его изучение.
Итак, мой вопрос: есть ли пересечение (что-то общее) между этими двумя технологиями или они дополняют друг друга? ... или совсем другое?
Ответы:
Короче говоря, это очень разные библиотеки для самых разных целей, но да, есть некоторые смутные сходства.
Redux - это инструмент для управления состоянием всего приложения. Обычно он используется в качестве архитектуры для пользовательского интерфейса. Думайте об этом как об альтернативе (половине) Angular.
RxJS - это библиотека реактивного программирования. Обычно он используется как инструмент для выполнения асинхронных задач в JavaScript. Считайте это альтернативой обещаниям.
Реактивное программирование - это парадигма (способ работы и мышления), в которой изменения данных наблюдаются на расстоянии . Данные не меняются на расстоянии .
Вот пример изменения на расстоянии :
// In the controller.js file
model.set('name', 'George');Модель изменяется от контроллера.
Вот пример наблюдения с расстояния :
// logger.js
store.subscribe(function (data) {
console.log(data);
});В Регистраторе мы наблюдаем за изменениями данных, которые происходят в Store (на расстоянии), и записываем в консоль.
Redux немного использует реактивную парадигму: Магазин является реактивным. Вы не устанавливаете его содержание на расстоянии. Вот почему store.set()в Redux нет. Магазин наблюдает за действиями на расстоянии и изменяется сам. А Магазин позволяет другим наблюдать за своими данными на расстоянии.
RxJS также использует парадигму Reactive, но вместо того, чтобы быть архитектурой, он дает вам базовые строительные блоки, Observables , для выполнения этого шаблона «наблюдения с расстояния».
В заключение, очень разные вещи для разных целей, но поделитесь некоторыми идеями.
Это очень разные вещи.
RxJS может использоваться для реактивного программирования и представляет собой очень полную библиотеку с более чем 250 операторами.
И Redux, как описано в репозитории github, «Redux - это контейнер с предсказуемым состоянием для приложений JavaScript».
Redux - это просто инструмент для обработки состояния в приложениях. Но для сравнения вы можете создать полноценное приложение только на RxJS.
Надеюсь это поможет :)
Redux - это просто библиотека управления состоянием, имеющая четко определенные стандарты для операций обновления. Насколько вы придерживаетесь стандартов, вы можете поддерживать разумный поток данных и легко рассуждать. Это также дает возможность улучшить поток данных с помощью промежуточного программного обеспечения и средств расширения хранилища.
RxJS - это набор инструментов для реактивного программирования. Фактически вы можете думать обо всем, что происходит в вашем приложении, как о потоке. RxJS предоставляет очень богатый набор инструментов для управления этими потоками.
Где перехватывает RxJS и Redux? В redux вы обновляете свое состояние с помощью действий, и, очевидно, эти действия можно рассматривать как потоки. Используя промежуточное программное обеспечение, такое как redux-observable (вам не обязательно), вы можете реализовать свою так называемую «бизнес-логику» реактивным способом. Другое дело, что вы можете создать наблюдаемое из своего хранилища redux, что иногда может быть проще, чем использование усилителя.
Короче говоря:
Redux: библиотека, вдохновленная Flux, используемая для управления состоянием .
RxJS: это еще одна библиотека Javascript, основанная на философии реактивного программирования, используемая для работы с «потоками» (наблюдаемые объекты и т. Д.) [Прочтите о реактивном программировании, чтобы понять концепции потоков].
Я просто хотел добавить некоторые прагматические отличия от того, когда я делал RxJS-код, вдохновленный Redux.
Я сопоставил каждый тип действия с экземпляром Subject. Каждый компонент с отслеживанием состояния будет иметь субъект, который затем отображается в функцию-редуктор. Все потоки редуктора объединяются mergeи затем scanвыводят состояние. Значение по умолчанию устанавливается startWithнепосредственно перед scan. Я использовал publishReplay(1)для состояний, но могу удалить его позже.
Функция react pure render будет только в том месте, где вы производите данные события, отправляя всех производителей / субъектов.
Если у вас есть дочерние компоненты, вам нужно описать, как эти состояния объединяются в ваше. combineLatestможет быть хорошей отправной точкой для этого.
Заметные отличия в реализации:
Никакого промежуточного ПО, только операторы rxjs. Я считаю, что это самая большая сила и слабость. Вы все еще можете позаимствовать концепции, но мне трудно получить помощь от родственных сообществ, таких как redux и cycle.js, поскольку это еще одно нестандартное решение. Поэтому в этом тексте мне нужно писать «я» вместо «мы».
Нет переключателя / регистра или строк для типов действий. У вас есть более динамичный способ разделения действий.
rxjs можно использовать как инструмент в другом месте и не входит в управление состоянием.
Меньшее количество производителей, чем типов действий (?). Я не уверен в этом, но у вас может быть много реакций в родительских компонентах, которые слушают дочерние компоненты. Это означает меньше императивного кода и меньшую сложность.
Решение принадлежит вам. Никаких рамок не требуется. Хорошо и плохо. В любом случае вы в конечном итоге напишете свой собственный фреймворк.
Это гораздо более фрактально, и вы можете легко подписаться на изменения из поддерева или нескольких частей дерева состояний приложения.
Я также работаю над гораздо большими преимуществами, когда дочерние компоненты описываются как потоки. Это означает, что нам не нужно собирать родительское и дочернее состояние в редукторах, поскольку мы можем просто («просто») рекурсивно комбинировать состояния на основе структуры компонентов.
Я также думаю о том, чтобы пропустить реакцию и пойти на снаббдом или что-то еще, пока React не будет лучше справляться с реактивными состояниями. Почему мы должны строить свое состояние вверх только для того, чтобы снова разбить его через свойства? Итак, я попробую создать вторую версию этого шаблона с помощью Snabbdom.
Вот более продвинутый, но небольшой фрагмент, в котором файл state.ts создает поток состояний. Это состояние компонента ajax-формы, которое получает объект полей (входов) с правилами проверки и стилями css. В этом файле мы просто используем имена полей (ключи объектов) для объединения всех дочерних состояний в состояние формы.
export default function create({
Observable,
ajaxInputs
}) {
const fieldStreams = Object.keys(ajaxInputs)
.map(function onMap(fieldName) {
return ajaxInputs[fieldName].state.stream
.map(function onMap(stateData) {
return {stateData, fieldName}
})
})
const stateStream = Observable.combineLatest(...fieldStreams)
.map(function onMap(fieldStreamDataArray) {
return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
acc[fieldStreamData.fieldName] = fieldStreamData.stateData
return acc
}, {})
})
return {
stream: stateStream
}
}Хотя код может мало что сказать по отдельности, он показывает, как вы можете построить состояние вверх и как вы можете легко создавать динамические события. Цена, которую придется заплатить, состоит в том, что вам нужно понимать другой стиль кода. И я люблю платить эту цену.