Integrating React and Angular with RXJS/Store actions
This is a experiment of using RXJS/Store actions as an interface between different complete separate apps in a page. In the example there is 2 independent angular apps and a react app.
It seems nice and clean way to expose an existing interface to other components.
Warning: In general, you should avoid doing this and focus on writing single-apps. For example using a root-level angular apps with modules is a more convenient way of integration. There will be lot of troubles with routing etc. when you have multiple independent frameworks in the page. Angular modules give similar development experience as the lately hyped 'frontend-microservices' You have been warned!
If you use this approach, you should publish your action-interface via npm repository. Here I cut some corners and made an fake npm publish from app1 to other apps.
To run the project:
git clone https://github.com/piizei/angular-react-ngrx-actions.gitcd angular-react-ngrx-actionsnpm installnpm run buildnpm start- Open browser at http://localhost:8080
In this experiment I use pubsub-js as a shared bus where the actions are passed. One could obviously use events or something else as well.
Magic happens in following places:
Action consumer at app1:
PubSub.subscribe( NAVBAR_QUEUE, (msg, action: Action) => {
ngZone.run( () => store.dispatch(action));
});Action producers with Angular app2 and React app3
PubSub.publish( NAVBAR_QUEUE, action);