re-rxjs / react-rxjs

React bindings for RxJS
https://react-rxjs.org
MIT License
542 stars 17 forks source link

<Subscribe> not working #263

Closed afroguy16 closed 2 years ago

afroguy16 commented 2 years ago

Hi, I tried to implement this with my knowledge of how it works in Angular, that is, handle the subscription by myself. It worked right, but it was failing in RTL. So I followed the documentation and used the <Subscribe></Subscribe> component to wrap my component, but I was getting an error Uncaught [Error: Missing Subscribe!]. So I brought down my implementation and followed the docs word for word, but the error didn't go away. Below is the code and the error:

import { createSignal } from "@react-rxjs/utils"
import { map } from "rxjs/operators"

// A signal is an entry point to react-rxjs. It's equivalent to using a subject
const [textChange$, setText] = createSignal<string>();

const [useText, text$] = bind(textChange$, "")

function TextInput() {
  const text = useText()

  return (
    <div>
      <input
        type="text"
        value={text}
        placeholder="Type something..."
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      Echo: {text}
    </div>
  )
}

// Previously...
// const [useText, text$] = bind(...);

const [useCharCount, charCount$] = bind(
  text$.pipe(
    map((text) => text.length)
  )
)

function CharacterCount() {
  const count = useCharCount()

  return <>Character Count: {count}</>
}

function CharacterCounter() {
    return (
      <div>
        <Subscribe>
          <TextInput />
          <CharacterCount />
        </Subscribe>
      </div>
    )
  }

export default CharacterCount

image

Steps to Produce

  1. Create react app with typescript template
  2. Copy paste the code from the documentation
  3. Run npm start
josepot commented 2 years ago

Hi @afroguy16 ! Thanks for reporting this. Unfortunately, though, I can't manage to reproduce the issue.

Could you please provide us with a codesandbox, stackblitz or a github repo that we can use to reproduce this issue?

Thanks!