Pass data from context provider to screen using RxJS

[KrisLau]

So currently I'm using WatermelonDB with RxJS as per WatermelonDB's documentation to have observable database queries. These queries depend on my global state which I store in async storage and send that to each individual screen using react navigations params, however I was told that it would be better to store this using Context API similar to how firebase auth is setup.

Code

Context Provider:

import React, {createContext, useContext, useState} from 'react';

const ExampleContext= createContext();
function useExample() {
  return useContext(ExampleContext);
}

function ExampleProvider({children}) {
  const [exampleState, setExampleState] = useState(null);

  const value = {
    exampleState,
    setExampleState
  };

  return (
    <ExampleContext.Provider value={value}>
      {children}
    </ExampleContext.Provider>
  );
}

export {ExampleContext, ExampleProvider, useExample};

Component:

export default compose(
  withDatabase,
  withObservables([], ({database}) => ({
    variableName: database
      .get('table_name')
      .query()
      .observe(),
  })),
)(Component)

What I'm trying to do

export default compose(
  withDatabase,
  withObservables([], ({database}) => {
    const example = useExample;
    return {
        variableName: database
          .get('table_name')
          .query()
          .observe(),
    };
  }),
)(Component)

but I get an invalid hook call so I'm wondering if there is a way to use RxJS to do so or if there is a different approach I can use pass this global state to all my screens without redux

[voliva]

I'd suggest asking this in WatermelonDB, as it's more a React + WatermelonDB question rather than rxjs.

If withObservables can take in props from the parent, then something you could always do is wrap it with another component that reads the value from context and passes it in to withObservables. You could even make a HOC so it plays nicely, something like:

export default compose(
  withDatabase,
  withContext(ExampleContext, value => ({ example: value })),
  withObservables([], ({database, example}) => {
    return {
        variableName: database
          .get('table_name')
          .query()
          .observe(),
    };
  }),
)(Component)

But again, it's sounds like it's something that WatermelonDB (or its community) should have already solved

[KrisLau]

If withObservables can take in props from the parent, then something you could always do is wrap it with another component that reads the value from context and passes it in to withObservables. You could even make a HOC so it plays nicely, something like:

export default compose(
  withDatabase,
  withContext(ExampleContext, value => ({ example: value })),
  withObservables([], ({database, example}) => {
    return {
        variableName: database
          .get('table_name')
          .query()
          .observe(),
    };
  }),
)(Component)
```

Sorry, I just realized that I posted this here because I thought the compose method came from here and I just realized it is from recompose. However I hope you'll be able to help me understand the withContext that you showed in your reply as it seems to be exactly what I am trying to achieve. I'm assuming that example is using the recompose library?

My HOC is like this (copied from my original post):

Context Provider:

import React, {createContext, useContext, useState} from 'react';

const ExampleContext= createContext();
function useExample() {
  return useContext(ExampleContext);
}

function ExampleProvider({children}) {
  const [exampleState, setExampleState] = useState(null);

  const value = {
    exampleState,
    setExampleState
  };

  return (
    <ExampleContext.Provider value={value}>
      {children}
    </ExampleContext.Provider>
  );
}

export {ExampleContext, ExampleProvider, useExample};

So I passed the ExampleContext to the withContext and logged the value but all I'm getting is the navigation object (from react navigation) of the current screen instead of the context value. My current change:

 export default compose(
   withDatabase,
   withContext(ExampleContext, value => { console.log(value); }), <----- returning navigation object
   withObservables([], ({database, example}) => {
     return {
         variableName: database
           .get('table_name')
           .query()
           .observe(),
     };
   }),
 )(Component)

[voliva]

Sorry, I meant create your own HOC to make your life easier. I'm looking at recompose's withContext and it's not what I wanted.

Essentially, the simple version is that you could wrap your component with another one that provides the context value:

const DBComponent = compose(
   withDatabase,
   withObservables([], ({database, example}) => {
     return {
         variableName: database
           .get('table_name')
           .query()
           .observe(),
     };
   }),
 )(Component)

export default function(props) {
  const value = useExample();

  return <DBComponent {...props} example={value} />
}

But then because you're already using HOCs and it's something you want to use many times, you can probably abstract this into a HOC like so:

const withContext = (context, getProps) => (Component) => {
  return function WithContext(props) {
    const value = useContext(context);
    
    return <Component {...props} {...getProps(value)} />
  }
}

// So now it can be composed

export default compose(
  withDatabase,
  withContext(ExampleContext, value => ({ example: value })),
  withObservables([], ({database, example}) => {
    return {
        variableName: database
          .get('table_name')
          .query()
          .observe(),
    };
  }),
)(Component)

(A HOC is just a function that takes in a component and returns another one that does something extra. It's a bit outdated, since hooks came out in 2019)

[KrisLau]

That makes sense, thanks! I also found fromRenderProps which works as well

[KrisLau]

Ended up using fromRenderProps() from recompose. Example code:

fromRenderProps(ExampleContext, ({exampleState}) => ({exampleState})),

Documentation: https://github.com/acdlite/recompose/blob/master/docs/API.md#fromrenderprops