How can i use useObservable to create a subject

[ShravanSunder]

Hi! I'm currently learning RxJs and using it with react.

const flag$ = useObservable(pluckFirst, [props.flag])

I was wondering how i can use the above to create a subject? I wanted to do it while staying in react. Do i have to create a separate subject resource thats outside of react?

thanks for the wonderful library

[crimx]

Yes you can! "Do whatever you want with Observables" is one of the main features of observable-hooks.

If you want to create Subject from dependencies, you can do this:

const flag$ = useObservable(
  inputs$ => inputs$.pipe(
    map(([flag]) => flag),
    share()
  ),
  [props.flag]
)

Or if you just want to create a Subject out of thin air, you can do this:

const subject$ = useObservable(() => new Subject())

[crimx]

That would be great! PRs are welcome! 🤩

Also you might wanna take a look at the useObservable API docs. There are explanations and examples on why and how to use it.

[ShravanSunder]

@crimx as a follow-up question, is there a reason the API doesn't have something like useSubject to pass back a subject?

Do you see any problems with the below code? if I wanted to make a hook to access a subject? I am using the next method in the subject to pass data into the subject from child components

/**
 * returns
 * 1. an observable of a value
 * 2. the current state
 */
export type SubjectWithState<T> = { subject$: BehaviorSubject<T> | undefined; state: T };


/**
 * Returns an observable from initial state and current state
 * @param value
 */

/**
 * Returns an observable from initial state and current state
 * @param value
 */
const useCreateSubject = <T1,>(value: T1): SubjectWithState<T1> => {
   const observable$ = useObservable(pluckFirst, [value]);
   const state = useObservableState(observable$, value);

   return { subject$: observable$ as BehaviorSubject<T1>, state };
};

[crimx]

Were you trying to achieve something like the useObservableCallback?

[ShravanSunder]

I did think about using useObservableCallback and it seemed like something i could use.

However i wanted to reduce the number of properties i would use to access the state, observable and to send data to the observable as well. So seemed like subject with state was a good option.

I'm still experimenting with the above to see if it fits my need for local state with streams and actions.

[ShravanSunder]

in the end i used used useObservableCallback? as you mentioned. Thanks for the help!