LeetCode-OpenSource/rxjs-hooks

Suggestion: use object for `input` instead of tuple

OliverJAsh opened this issue · 4 comments

When passing in many inputs, it's awkward to remember the indexes inside the input tuple when you're trying to read/destructure a specific input, e.g:

useObservable(
  input$ => {
    const dispatch$ = input$.pipe(
      map(input => input[5]),
      distinctUntilChanged(),
    );

    /* … */
  },
  200,
  [
    props.shouldDisableInfiniteScroll,
    props.isDoneFetching,
    props.fetchDataParams,
    props.fetchDataAndBuildActions,
    props.dispatch,
    props.history,
  ],
);

If the inputs were represented as an object instead, they would be much easier to destructure.

useObservable(
  input$ => {
    const dispatch$ = input$.pipe(
      map(({ dispatch }) => dispatch),
      distinctUntilChanged(),
    );

    /* … */
  },
  200,
  pick(
    props,
    "shouldDisableInfiniteScroll",
    "isDoneFetching",
    "fetchDataParams",
    "fetchDataAndBuildActions",
    "dispatch",
    "history",
  ),
);

Another idea: the inputs could be provided as separate observables. This way, users don't have to destructure the observable, nor do they have to worry about adding distinctUntilChanged:

useObservable(
  inputs => {
    const { dispatch$ } = inputs;

    /* … */
  },
  200,
  { dispatch$: props.dispatch }
);

I think observable-hooks solves this problem because you can do:

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

and then use that inside any closure.

I like the idea of each prop being an observable, but that could get somewhat complex when listening to many of them.

Re. #99 (comment)

Another idea: the inputs could be provided as separate observables. This way, users don't have to destructure the observable, nor do they have to worry about adding distinctUntilChanged:

This is a start: https://stackblitz.com/edit/react-ts-p7ueqk.

@Brooooooklyn What do you think to this idea?