question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-rxjs hook not executing correctly

See original GitHub issue

I’m trying to get an idea from your GitHub example of how I might use your library to manage some data streams to represent an API request including data, isLoading and error. I know I could have 3 separate Subjects and maybe this is the better way to achieve this. However I do think having collating related data makes sense for organising code or accessing related data streams through a single react-rxjs hook on a component. I have many API requests in this app, and would like to re-use this pattern throughout the app.

The state

import { merge, Subject } from "rxjs"
import { shareLatest, bind } from "@react-rxjs/core"
import API from "../api/api"
import ROUTES from "../api/routes"

interface EntityField {
  id: string;
  entityId: string;
  name: string;
  type: "Text" | "Number" | "Checkbox";
  size: "Large" | "Medium" | "Small";
  searchable: boolean;
  required: boolean;
  position: number;
}

const isLoading = new Subject<boolean>();
const toggleLoading = (loading: boolean) => isLoading.next(loading);

const error = new Subject<string>();
const setError = (errorMessage: string) => error.next(errorMessage);

const fields = new Subject<EntityField[]>();
const loadEntityFields = async (entityId: string) => {
  toggleLoading(true);
  try {
    const { data } = await API.get(`${ROUTES.ENTITIES_FIELDS}/${entityId}/fields`);
    fields.next(data);
  } catch (e) {
    setError(e);
    console.error(e);
  } finally {
    toggleLoading(false);
  }
}

const entityFieldsMerge = merge(
  isLoading,
  error,
  fields
).pipe(shareLatest())

const [useEntityFields, entityFields$] = bind(entityFieldsMerge);

const entityFieldsStore = {
  useEntityFields,
  entityFields$,
  loadEntityFields
}

export default entityFieldsStore;

This doesn’t seem to work - In the component I have:

const EntityFields: React.FC<EntityFieldsProps> = ({ entityId }) => {
  console.log('entityId ', entityId );
  const classes = useEntityFieldsStyles();

  const fields = entityFieldStore.useEntityFields();
  console.log("fields", fields);    
....

For the subscription I’ve done:

const provider$ = merge(entityFieldStore.entityFields$, layoutStore.profileSidePanelOpen$, layoutStore.sideMenuOpen$);

function App() {
  return (
    <Subscribe source$={provider$}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Router>
          <Routes />
        </Router>
      </ThemeProvider>
    </Subscribe>
  );
}

The layoutStore related hooks work fine, of course they’ve very simple boolean observables without any merges, but depending on your response I might refactor this code too.

The console.log("fields", fields); doesn’t execute and with the hook useEntityFields the app appears to behave in a peculiar way - it appears to interfere with the current MobX store (but that’s probably just a false flag).

Am I approaching this solution in the wrong way?

I’m hoping to change from MobX to the react-rxjs in the event that I can successfully demonstrate a PoC with react-rxjs.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
sbitprozcommented, Mar 10, 2021

@josepot @voliva sure did. Thanks - really appreciate it.

0reactions
volivacommented, Feb 28, 2021

Hey @sbitproz did these suggestions help you out?

I’ll close this issue as I think no further action is required, although we can reopen it if that’s not the case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Understanding common frustrations with React Hooks
The rules of React Hooks clearly state: Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top...
Read more >
Problem with types while using RXjs with React - Stack Overflow
I tried with many operator , type casting without success/ Trying with observables from subjects as well. reactjs · react-native · react-hooks ......
Read more >
How to use RxJS with React Hooks - YouTube
Try LogRocket for free: https://logrocket.com/?yt2Do you want to use RxJS with React Hooks ? Learn how in this video. 0:00 Introduction1:27 ...
Read more >
React Hooks + RxJS or How React Is Meant to Be - Soshace
In this article, we will explore how the RxJS and React combo allows for better readability and less boilerplate.
Read more >
LeetCode-OpenSource/rxjs-hooks: React hooks for RxJS
React hooks for RxJS. CircleCI codecov npm version. Installation; Demo; Apis. useObservable; useEventCallback. Installation.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found