фото Стив Халама на Бессмысленно
Если вы не читали деталь, которую я бы порекомендовал вам прочитать. Первая часть покрывает, как реализовать основные функциональные возможности redux.
DIY Redux с
Öner Zafer · 17 января ’19 · 5 мин читать
На DIY Redux с RXJS => RXDX Часть 2, я раскрою внутренние самые популярные и широко используемые Redux подразделение. Как я уже упоминал в первой части статьи – что вы можете найти выше -, моя цель – сделать эксперимент для объединения RXJS и всеми широко используемыми Redux Hamnatwares в библиотеку, которую можно найти ниже:
onerzafer/rxdx.
Redux, как библиотека для реагирования на основе RXJS
RXDX – это база RXJS Redux, как государственная библиотека управления, и она включает в себя все необходимые инструменты внутри.
сильно вдохновлен из больших библиотек redux. , React-redux. , redux-наблюдаемый и Ngrx.
Мотивация
Основная идея этой библиотеки приносят полную мощность RXJS в React Corld с знакомым интерфейсом Redux IIOT, полагаясь на некоторое промежуточное ПО в джунглях библиотек.
Установка
npm install rxdx --save
или
yarn add rxdx
Как пользоваться
Магазин
В отличие от React-redux RXDX не зависит от контекста, поэтому нет необходимости вводить поставщика на App.js. Но напротив, это требует экспортируемого магазина для функции. В этих кодах образцов предлагается иметь отдельный Store.js для инициализации магазина и импортируя его при необходимости. Умеренно интерфейс Createstore является как интерфейс React-redux.
//store.js
import {
createStore,
applyMiddleware,
combineReducers,
devToolsMiddleware,
effectsMiddleware
} from "rxdx/lib/rxdx";
import { todoEffectsПеред погружением в эту тему всегда нужно просмотреть необходимую подпись Hedmostwares.
(storeAPI) => (next) => (action) => state
Прежде чем начать, мне нужно признаться, когда я закончил функцию Createstore, я думал с смелой уверенностью что Все доступные Addractwares redux будет работать для моей версии. На самом деле, это сработало, но не для большинства из них, не для широко используемых:( Поэтому мне пришлось предоставить эти библиотеки/потраченные награды, повторно реализуя их или, по крайней мере, реализующие аналогичные. Вот так!
Другой подход к предубежденному Redux
При нормальных условиях Redux Не реализует/не имеет намерения реализовать TC39 наблюдаемый Поэтому он не совместим с RXJS по умолчанию.
Здесь я должен упомянуть случаи использования наблюдаемых; Если вам нужно управлять потоками событий, то, вероятно, лучше использовать наблюдаемый. На каких операциях я говорю? Объединение двух потоков в одну, фильтрующую, отображение или перенаправление потока. Для более подробных подробностей проверьте [_here Несомненно ( https://rxjs-dev.firebaseapp.com/guide/obsibable ) . _
При реализации Redux Хранить Вы обязательно заметите, что вы должны создать много действий. Я должен признать, что действия довольно похожи на события и во время выполнения, они будут вызвать сотни раз. Так что это должно быть точка, где Redux-наблюдаемый ловит Redux как источник потокового события. При этом это создает хорошую возможность для разработчиков, которые готовы создать некоторые асинхронные побочные эффекты на каждое выбранное действие. Для подробной документации на Redux-наблюдаемый Вы можете проверить здесь Отказ TL; доктор Магия происходит в функции под названием createeepsmiddleware Это имеет подпись ниже:
const createEpicsMiddleware = (rootEpic) => (storeAPI) => (next) => (action) => state
Если я честно, когда я проверил документацию, мне не понравилось, как нам нужно потреблять эту библиотеку. Для меня использование Эффект От Ngrx больше классный:) Поэтому я решил не подражать API redux-наблюдаемого, но функциональность должна быть там. Поэтому я оказался что-то следующим образом.
Как я уже упоминал, прежде чем мне очень нравится использование стиля NGRX, и я одолжил Эффект Декоратор и oftype Функция Tappable.
Эффект Декоратор так же просто, как добавление типа на исходную переменную. И если ваша среда поддерживает экспериментальные декораторы, использование может быть следующим:
@Effect()
const someCoolAsyncSideEffect = action$
.pipe(ofType('SomeCoolAction', 'OrEvenCoolerAction'))
.pipe(map(() => {type: 'SomeOtherCoolAction'}));
К сожалению, если ваша среда не поддерживает экспериментальные декораторы, этот кусок кода не будет выглядеть так много красивого.
Вспоминать
Пока я реализовал функцию Createstore в первая часть Из этой истории я внедрил функцию выбора в объекте открытого магазина, доверяя своему чувству кишечника. Это решение выявлено как довольно полезно в реализации повторно Библиотека Rxdx Отказ Быть Фрэнком, повторно полностью совместим с Rxdx , но я экспериментировал, и мне нужно было оспаривать себя, чтобы объединить все библиотеки в нее .
Что делает повторно делать? Требуется государство или государственная часть и возвращает ее часть. Так какая сделка? Мы можем достичь одной и той же функциональности без него, как пример ниже:
const reselect = (state, key) => state[key];
Пример выше полностью подрывает мощность этой простой, но невероятно полезной библиотеки. Сделка есть, повторно Обеспечивает простую повторяющуюся функцию, которая имеет мемузаризация Внутри, чтобы ускорить нашу трудоспособную фильтрацию на состояниях.
Эта функция будет иметь ключевую функциональность, пока мы потребляем Rxdx Хранить в реактивных компонентах. Использование селектора как простое следующее:
Redux Dev Tools Mardware
Я думал, что отсутствие интеграции к инструментам Redux Dev будет большим отсутствующим частью Rxdx. . Затем я начал читать документацию API инструментов DEV, и я нашел то, что мне нужно __REDUX_DEVTools_extension __. Connect
После этого точка было очень легко совмещать все в промежуточное программное обеспечение:
Наконец, я добрался до точки, которую я могу создать магазин, добавить некоторые редукторы, применить встроенные дополнительные подразнения и выбирать определенный государственный ребенок с воспоминанием:
Последние слова до следующего раза
Я настоятельно рекомендую такие эксперименты для любого, кто хочет узнать больше о любой библиотеке или каких-либо структуре дизайна или стилей кодирования. Это заставит вас под сомнение много вещей, которые вы делаете во время обычных ежедневных задач кодирования ваших.
В следующий раз, когда я продолжу свой эксперимент с тем, как объединить библиотеку redux с компонентами React, и она будет включать много информации о HOCS и декораторы Отказ
Если вы также являетесь самоучащимся, подобным мне, и немного нетерпелив на вершину, давайте просто попробуем сами до тех пор, пока не выпустит 3-й и последнюю часть статьи RXDX.
Вот мой репо, чтобы начать свой собственный эксперимент:
onerzafer/rxdx.
Redux, как библиотека для реагирования на основе RXJS
RXDX – это база RXJS Redux, как государственная библиотека управления, и она включает в себя все необходимые инструменты внутри.
сильно вдохновлен из больших библиотек redux. , React-redux. , redux-наблюдаемый и Ngrx.
Мотивация
Основная идея этой библиотеки приносят полную мощность RXJS в React Corld с знакомым интерфейсом Redux IIOT, полагаясь на некоторое промежуточное ПО в джунглях библиотек.
Установка
npm install rxdx --save
или
yarn add rxdx
Как пользоваться
Магазин
В отличие от React-redux RXDX не зависит от контекста, поэтому нет необходимости вводить поставщика на App.js. Но напротив, это требует экспортируемого магазина для функции. В этих кодах образцов предлагается иметь отдельный Store.js для инициализации магазина и импортируя его при необходимости. Умеренно интерфейс Createstore является как интерфейс React-redux.
//store.js
import {
createStore,
applyMiddleware,
combineReducers,
devToolsMiddleware,
effectsMiddleware
} from "rxdx/lib/rxdx";
import { todoEffectsЕсли вы заинтересованы в RXDX и наслаждались статьей до сих пор, пожалуйста, не забудьте показать свою признательность. Если вы поделитесь своими идеями и отзывами ниже, я бы рад только!
Спасибо за чтение!
Этот пост изначально опубликовал на hanckernoon.com. На dev.to он слегка адаптирован к платформе
DIY Redux с RXJS: часть 3 на Хэйнген
Оригинал: “https://dev.to/onerzafer/diy-redux-with-rxjs-part-2-2lpg”