Я медленно поднимаю 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>
</>
);
};