Redux Observable / RxJS: Как создать пользовательский наблюдаемый?

Я пытаюсь выполнить настройку веб-сокета в эпопее, наблюдаемом за сокращением, и я использую подход, аналогичный этому парню: https://github.com/MichalZalecki/connect-rxjs-to-react/issues/1

Тем не менее, похоже, что мой первый удар по подключению не работает, хотя он выглядит так же, как и парень выше:

import 'rxjs';
import Observable from 'rxjs';

import * as scheduleActions from '../ducks/schedule';

export default function connectSocket(action$, store) {
  return action$.ofType(scheduleActions.CANCEL_RSVP)
    .map(action => {
      new Observable(observer => {
        // do websocket stuff here
        observer.next('message text');
      });
    })
    .map(text => {
      console.log("xxxxxxxxxxxxx: ", text);
      return scheduleActions.rsvpCancelled(1);
    });
};

Однако я получаю Object is not a constructor ошибку:

введите здесь описание изображения

=== ОБНОВЛЕНИЕ ===

Похоже, предложение по деструктуризации экспорта {Observable} сработало!

Проблема не только в том, что text, похоже, не переходит к следующему методу ...

import 'rxjs';
import { Observable } from 'rxjs';

import * as scheduleActions from '../ducks/schedule';

export default function connectSocket(action$, store) {
  return action$.ofType(scheduleActions.CANCEL_RSVP)
    .map(action => {
      new Observable(observer => {
        // do websocket stuff here
        observer.next('message text');
      });
    })
    .map(text => {
      console.log("xxxxxxxxxxxxx: ", text); // prints undefined
      return scheduleActions.rsvpCancelled(1);
    });
};

rxjs redux-observable
person bigpotato    schedule 21.03.2017    source источник
comment
Я не знаю, если это проблема, но rxjs не имеет экспорта по умолчанию, поэтому вызов import Observable from 'rxjs' не должен работать. Вместо этого вы должны использовать import { Observable } from 'rxjs'.   -  person martin    schedule 21.03.2017
comment
что исправило ошибку! большое спасибо!   -  person bigpotato    schedule 21.03.2017
comment
не знаю почему, но text кажется неопределенным   -  person bigpotato    schedule 21.03.2017

Ответы (2)


arrow_upward
3
arrow_downward

В RxJS v5 класс Observable доступен как именованный экспорт, а не как экспорт по умолчанию.

import { Observable } from 'rxjs';

Импорт из обычного rxjs также импортирует весь RxJS (добавляя все операторы к прототипу Observable). Это описано в документации здесь. Если вы предпочитаете быть более явным и импортировать только сам Observable, вы можете импортировать его прямо в rxjs/Observable:

import { Observable } from 'rxjs/Observable';

Отдельно у вас есть пара проблем с тем, как вы отображаете свой собственный Observable.

Первый выпуск

На самом деле вы его не возвращаете. хе-хе. Вам не хватает оператора возврата (или вы можете удалить фигурные скобки и использовать неявный возврат стрелочной функции).

Второй выпуск

Обычный оператор .map() не делает ничего особенного, когда вы возвращаете Observable. Если вы хотите, чтобы пользовательский Observable был подписан и сглажен, вам нужно будет использовать оператор, который выполняет какое-то сглаживание.

Наиболее распространены два - mergeMap (также известный как flatMap) или switchMap.

action$.ofType(scheduleActions.CANCEL_RSVP)
  .mergeMap(action => {
    return new Observable(observer => {
      // do websocket stuff here
      observer.next('message text');
    });
  })

Какой оператор вам нужен, зависит от вашего желаемого поведения. Если вы еще не знакомы, вы можете проверить документацию на различные операторы или сразу переходите к mergeMap и _13 _ документы.

Если вы любите приключения, у RxJS v5 есть поддержка WebSocket из коробки, вы можете попробовать _ 14_. Это не очень хорошо документировано, но вы также можете взглянуть на модульные тесты, а для простой однонаправленной потоковой передачи только для чтения это довольно понятно - укажите URL-адрес и подпишитесь. На самом деле он невероятно мощный, если вы можете понять, как его использовать. Поддерживает двунаправленное мультиплексирование или несколько сложных каналов ввода / вывода через один разъем. Мы используем его в Netflix для нескольких внутренних инструментов с тысячами запросов в секунду.

person jayphelps    schedule 21.03.2017
comment
Спасибо! это исправило мою ошибку. ты хоть представляешь, почему text не определен? - person bigpotato; 21.03.2017
comment
ты настоящий мвп! Благодарность! используя mergeMap + return (а также ваше первоначальное предложение), это - person bigpotato; 21.03.2017

arrow_upward
0
arrow_downward

Вы можете посмотреть Демо. Посетите страницу Create Custom Observable.

person Ambuj Khanna    schedule 31.05.2019