Skip to content

Observer error when using <Redirect> component with subscriptions #26

@Tarlord

Description

@Tarlord

Description

There's an issue with the observer HOC when using the <Redirect> component from expo-router together with useSub. The error adm.onStoreChange is not a function is thrown, although the redirect itself works correctly.

Steps to Reproduce

  1. Create a component that uses observer, useSub, and conditionally renders a <Redirect> component
  2. Subscribe to a non-existent document using useSub
  3. Return a <Redirect> component when the document doesn't exist

Code Example

Broken code (throws error):

import { observer, pug, $, useSub } from 'startupjs'
import { Div, Span } from 'startupjs-ui'
import { Redirect } from 'expo-router'

export default observer(function TransactionPage () {
  const $t = useSub($.transactions['1-2-3-4'])

  const tt = $t.get()
  if (!tt) {
    return <Redirect href='/' />
  }
  return pug`
    Div.root
      Span.text Hello, world!
  `
})

Working workaround:

import { observer, pug, $, useSub } from 'startupjs'
import { Div, Span } from 'startupjs-ui'
import { useRouter } from 'expo-router'

export default observer(function TransactionPage () {
  const $t = useSub($.transactions['1-2-3-4'])
  const router = useRouter()

  const tt = $t.get()
  if (!tt) {
    router.replace('/')
  }
  return pug`
    Div.root
      Span.text Hello, world!
  `
})

Error: adm.onStoreChange is not a function

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions