Код один раз
Если вы программист, который любит или должен работать со многими фреймворками, будет замечательно использовать один и тот же код в любом фреймворке, который вы используете, и без какой-либо настройки для него, просто скопируйте и вставьте.
Темы, которые мы рассмотрим
1. Что такое службы в Angular?
2. Почему Rxjs?
3. Как создать службу, которая работает в любой среде.
4. Как сделать управление состоянием с помощью Rxjs.
5. Как использовать сервис в компоненте React.
1. Что такое службы в Angular?
Сервисы — отличный способ обмена информацией между классами, которые не знают друг друга. Воспользовавшись услугами, вы сможете:
- извлекать данные из любого компонента в вашем приложении
- использовать операторы Rxjs и другие…..
- использовать его как управление состоянием (что мы сейчас и сделаем)
- и иметь чистый и красивый код
2. Почему Rxjs
RxJS можно использовать с любыми фреймворками или Pure Javascript без какой-либо настройки.
RxJS — это библиотека для создания асинхронных и событийных программ с использованием наблюдаемых последовательностей.
RxJS предлагает огромный набор операторов в математических категориях, преобразованиях, фильтрации, утилитах, условных операциях, обработке ошибок и объединениях, которые упрощают жизнь при использовании с реактивным программированием.
3. Как создать сервис, работающий в любой среде.
- установить следующую библиотеку
$ npm install rxjs // or $ yarn add rxjs
2. создайте папку для всех ваших сервисов, обычно я называю ее services
и создаю в src/srvices. Неважно, где вы его создаете.
3. создайте новый файл .ts или .js, я назову его counter.ts (потому что здесь я использую машинопись)
Итак, здесь мы создаем одноэлементный класс, потому что один объект должен использоваться для координации действий в системе.
4. Как сделать State Management с помощью Rxjs.
1. Заявите о своих initial_state и store(BehaviorSubject)
2. Функции
а. написать функцию, которая возвращает ваш счетчик as Observable, чтобы вы могли подписаться на него и следить за любыми изменениями.
b. напишите свою логику.
5. Как использовать сервис в компоненте React.
Как это работает
BehaviorSubject содержит одно значение. Когда он подписан, он немедленно выдает значение, и каждый раз, когда этот субъект получает новое значение, он также выдает его.
Примечание. Если вы отмените подписку, вы не получите никаких новых значений
конец.
Вам может быть интересно 🤔 почему Rxjs? Зачем использовать это управление состоянием и оставить Redux, Context или Vuex?
Ответ заключается в том, что если вы используете Rxjs в качестве службы API и управления состоянием, вы сможете скопировать этот файл .ts или .js и вставить его в любой проект, который у вас есть, независимо от того, какую платформу вы используете.
Настройка не требуется. Действительно, у вас будет отличный централизованный код (ваши вызовы API и управление состоянием в одном файле).
