Вы находитесь на странице: 1из 11

redux - принцип, который представляет собой объект - state(store) -иммютбл (неизменяемый

объект),

но если мы захотим изменить данные в стейте, мы должны через редьюсеры(чистые функции)

, которые в себя берут предыдущий стейт и за счёт action (который содержит логику), на его
основе,

редьюсер возвращает новый стейт, И ВСЕ подписчики (сабскрайберы) узнают про это, ведь это
единый источник правды.

Главная цель - предсказуемый, устойчивый, имютбл объект, который меняется только за счёт
действий (action).

ПОЧЕМУ НЕ ИЗМЕНЯеМЫЙ - просто и дешево реализовать методы обнаружения изменений, что


гарантирует рендер дерева только когда нужно

Редьюсер - функция, которая изменяет стейт:

в сервисах, компонентах мы можем диспетчнуть в стор экшн,

экшн подписаны на редьюсеры, редьюсер видит что была

деспетчнута определённая экшн, он берёт стейт, меняет

на основании экш и в возвращает в нгрх новый стор

Чтобы взять что-то из стора существуют селекторы:

это такой инструмент, который позволяет в компонентах,

контроллерах, позволяет подписаться на куски стора(части).

Эффект: функция которая берёт в себя екшн и возвращает экшн,

например берём данные с бекенда, деспетчим в экшн какой-то

эффект, который подписан на этот экшн, пошлёт запрос на бек,


получит данные и диспетчнет ещё один экшн, который пойдёт

в редьюсер, но можно и снова в эффект если есть небходимость.

Схема - происходит экшн, редьюсер изменяет стор на основании

экшн и куски данных подтягиваются в компоненты за счёт подписки

на эти данные с помощью селекторов.

За и против- за: меньше http вызовов, поддержка, тестирование,

бизнес логика в одном месте, одно централизированное,

немутироемое состояние.

против: долгая подготовка, больше кода, сложность в изучении

когда использовать: одни и те же данные используются в

разных частях приложения( много хттп запросов и есть

определённая кривая зависимости от размера приложения)

ещё бесконечная вложенность (инпут, аутпут), бывает

когда нужно пройти через несколько уровней, прикол если

сдвинуть куда-то компонент - придётся всё менять :)ор.

пример

подключаем нужные библиотеки

и подключаем тут редьюсеры в кор модуле

редьюсер
мы должны создать структуру всех данных стейта

ещё нужно инициализировать стейт

дальше как мы реализуем логику

нужно создать редьюсер, дальше впихнуть туда инициализированные

значения, и подписчики на экшнс.

Есть экшн инкризКаунт, если она будет диспетчнута, каунт

увеличиться на один, на вход получаем стейт и объект со

значением, возвращаем объект с разбитым стейтом и

отдельно новой переменной которая перекроет переменную

которая была стейтом с новым значением.

Возвращать редьюсер так в конце

Экшнс
экшнс это такая штука, которая несёт название экшна

лучше писать через неймспейс с определённым названием.

Она несёт с собой данные, определённый пейлоад, свойства,

можно добавить много, должны оны быть в виде объекта

с свойствами.

Селекторы

по факту из библиотеки стора мы юзаем функции

которые на вход ловят стейт, и возвращают какое-то свойство

на которое мы хотели подписаться при изменении

можно пихать сюда небольшую бизнес логику

Рассмотрим компоненты
Первый компонент данные отсылает, тягает екшн, а второй

держит селекторы и тянет эти данные за счёт подписки

мы инициализируем стор

в функциям диспетчем через стор нужные экшнс


теперь нужно прочитать во втором компоненте данные

которые поменялись после экшна с помощью селекторов

Мы должны инициализировать стор, и инициализировать

обзёрвбл через нужный селектор как на фото ниже

Эту тему теперь можно использовать в шаблоне за счёт пайпа асинк

к примеру { { $count | async }}

По передачи месседж
мы передаём данные в виде объекта

в нужном делаем инициализацию ещё одного селектора

Работа с эффектами , подключим в импорты кор модуля

создаём эффект
предварительно - экшн это поток дат(обзервбл), с помощью мерджмап

мы переходим на другой поток, который берётся в нашем случае с

сервиса.

Эффект подписана на акцию, нужно превратить поток этой акции

в поток что вернёт сервис и трансформировать в другую

экшн(тоже поток).

Нужно добавить новые экшн

что делают эффекты - класс который в котором есть куча функций

которые подписаны на экшнс(все)

и каждый раз когда случается экшн или другой эффект возвращает

экшн, тогда эффект слушает что соврешился экшн , и мы комбинируем

потоки, или переключаемся на другой поток.

(немного отойдём к рхджс)

===

mergeMap - комбинация

switchMap - переключение

разница - если есть кнопка, которая тянет данные, и оно длится 20 сек

и юзер кликает чаще, тогда мерджМап отменяет предыдущие реквесты


а свитчмап будет посылать новый реквест и мы будем их все ждать.

===

В коде сервис возвращает данные с бекенда, теперь мы трансформируем

с помощью мап оператора поток этих данных в поток экшн, или даже

несколько экшнс

не забудем добавить в редьюсер стейт

создать подписку

и теперь в компоненте мы диспетчем экшн по клику на кнопку

в селекторы нужно добавить новый

а на инициализации компонента нужно сделать подписку на селектор


тут ошибочка( в последнем скрине) ,нужно выводить что-то , не просто console.log

а console.log(data);

В итоге схема такая:

мы были в компонента, по нажатию на кнопку диспетчнули определённую экшн,

эффект подписан на акцию, он берёт данные с сервера, он возвращает другую, та летит в


редьюсер, в компонент мы тянем данные за счёт селектора.

Крутые и сложные фишки эффектов

К примеру можно скомбинировать несколько бекенд коллов в одном эффекте.

Покажем как в одна экшн может быть использована и в редьюсере и в эффекте.

добавим в редьюсер dataLoading

создаём селектор нужный

добавляем подписку в редьюсере


в компоненте добавим этот поток

вот так подписались на одну и ту же экшн в редьюсере и в эффекте

БИЗНЕС ЛОГИКА - в эффекты большую часть

ТЕСТИРОВАНИЕ редьюсера и селектора.

#узнать про горячие и холодние обзервибили

Вам также может понравиться