react-rxjs hook not executing correctly
See original GitHub issueI’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:
- Created 3 years ago
- Comments:7 (1 by maintainers)
Top GitHub Comments
@josepot @voliva sure did. Thanks - really appreciate it.
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.