RXJS в реакции без субъектов - PullRequest
0 голосов
/ 14 октября 2019

Я медленно поднимаю RXJS и учусь использовать его в контексте React.

Все учебники по Rxjs, которые я нашел, начинаются с наблюдаемых. Это имеет смысл. Когда я пытаюсь использовать наблюдаемое в реакции, это не работает. Вместо этого я должен создать тему и вставить в нее значения.

Почему это так? Почему я не могу использовать простые старые наблюдаемые в React? Я делаю что-то неправильно? Может кто-нибудь объяснить, почему RXJS в реакции требует использования предметов.

Я понимаю, что это немного расплывчато, но я пока не понимаю концепции, чтобы сформулировать лучший вопрос. Вот пример, иллюстрирующий то, что я изо всех сил пытаюсь понять.

Вот супер простой компонент, который принимает значение во входном значении и отображает его. обычная реакция, нет RXJS.

const InputBox = () => {
  const [value, setValue] = React.useState('');
  return (
    <>
      <p>{value}</p>
      <input value={value} onChange={e => setValue(e.target.value)}></input>
    </>
  );
};

Если я хочу сделать то же самое с RXJS, это работает ...

const inputStream$ = new Subject();

const InputBox = () => {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const subscription = inputStream$.subscribe(_value => setValue(_value));
    return () => subscription.unsubscribe();
  }, []);

  return (
    <>
      <p>{value}</p>
      <input
        value={value}
        onChange={e => inputStream$.next(e.target.value)}
      ></input>
    </>
  );
};

Но если я пытаюсь использовать обычную наблюдаемую, нетпредмет, тогда это не работает.

const inputStream$ = new Observable();

const InputBox = () => {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const subscription = inputStream$.subscribe(_value => setValue(_value));
    return () => subscription.unsubscribe();
  }, []);

  return (
    <>
      <p>{value}</p>
      <input
        value={value}
        onChange={e => inputStream$.next(e.target.value)}
      ></input>
    </>
  );
};

1 Ответ

2 голосов
/ 14 октября 2019

Следующий метод существует для наблюдателя, а не наблюдаемый. Субъект является одновременно наблюдателем и наблюдаемым, поэтому у него есть следующий метод. Если вы хотите использовать наблюдаемую ваниль, вам нужно передать наблюдателя в конструктор. Но почему бы не использовать тему, вот для чего они. Субъект также является многоадресным, поэтому разные компоненты могут подписываться на одни и те же данные более эффективно, чем просто наблюдаемые.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...