Can I create a pub/sub message message queue with RxJS inside angulajs application. I have for example two modules:
ModuleA
ModuleB
They exists as separate npm package but connected in ModuleC - it's the main shell.
I don't want to create a dependency as ModuleD and create a tight coupling between the modules. So my thought is to create a message bus using RxJS.
Is it possible?
I presume an API will look like that:
RxQueue.subscribe("name:of:the:queuemessage", handler => { handler.result } );
RxQueue.create("name:of:the:queuemessage", (observer) => {
// implementation of usual Rx subscribtion
})
I think this might be closest to what you are asking for:
rxmqjs/rxmq.js: JavaScript pub/sub library based on RxJS
https://github.com/rxmqjs/rxmq.js
https://www.npmjs.com/package/rxmq
Not angular specific, but I consider that a good thing.
It might not be exactly what you are looking for but for sharing state and data between different components and modules, you could use redux/ngrx-store.
Redux is an architecture in which you can send state to a store. The store will update itself and notify everyone listening to it if something has changed.
So your modules could both subscribe to the store and listen to events. If they want to communicate, they could send a message to the store. The store would then notify everyone listening if something has changed.
One difference is that this store object will actually store this object as a temp database would. This isn't really queue behaviour.
Checkout http://redux.js.org/ for more information.
Related
Summary
I am writing a React-Redux application, and would like to create a service that can be accessed across multiple components, with the following characteristics:
Singleton (just gets instantiated once across the entire
application)
Injectable (can be injected into, and used by, multiple components across the application)
Redux Connected (can access the entire Redux state tree & received updates to state changes)
Code Example
The type of solution I have in mind, would allow me to inject a service int a React Component, and use in the following way:
{ featureAvailabilityService.isAvailable('myFeature') && (<MyFeature />) }
Ideas
I have read about High Order Components, Hooks, and the Context API. There are also some interesting libraries, such as Unstated, and Redux-Logic. I feel like the best answer probably lies somewhere between these, but could use some guidance to put me on the right track.
Use Case
In this instance, I would like to create a reusable service, which has methods to determine the availability of certain features. This involves relatively complex logic based on System, Tenant, and User configuration and state. It also requires the service to have access to state from several different parts of the application. It will also be reused broadly across the application.
Why Yet Another React Service Question?
I realize there are already a lot of similar questions to this, usually from people with an Angular background, looking for the React equivalent to an Angular Service. However, I have not yet found an answer that provides for the above three criteria... or at least not one that I understood.
Thanks for any input.
The code given in this plunker works fine even when changed with subscribe in the beta version 50. But this does not work when the classes are put in separate files and exported.
How to have the classes in separate files and use broadcaster to reflect change in data.
http://plnkr.co/edit/URXycFe3njtMKGmHrz9W?p=preview
broadcaster.subscribe(
data=>{ generatedNumber => this.receivedNumber = generatedNumber}
);
To communicate between components, you need to use a shared service containing an observable / subject. You can send an event that will be received by all components that subscribe to it.
You need to be careful to share the same instance. For this, specify the service provider into the main component of your application.
See this doc for more details:
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
All:
I am pretty new to React from AngularJS. In AngularJS, there is service dependency inject which can provide a service instance to do data fetching, processing, etc., other than UI operation. I wonder how to do this(or implement that injection) in React component?
Thanks
I prefer to create a service in another file that exposes the 'public' functions through module.exports.
e.g.
module.exports = {
foo: function(){ return bar; }
}
which is then referenced by Components using
import myService from './routetoservice/myService'
An Extension to Michael Dunn's Answer
This is the actual answer ,
Service pattern is not limited to any programming language or
library.
We can implement this concept in any language , Even we can
implement this in react
A tiny service can be created on server OR in ui browser in Javascript that serves some logical purpose
It gives us benefits of code availability, code management , code isolation of particular logic
Its a very native way for code availability, code management , code isolation of particular logic
If we compare redux/flux vs services ,redux/flux also serve these purpose's
Currently i am using redux and its actions , and also created my tiny services on ui when required.
No need to use OTHER NPM MODULES FOR CREATING SERVICES , Just Michael Dunn's solution is enough
In reactjs we use the flux pattern to provide data handling. Here is an example of that with reflux. React with Flux: is this the dogmatic pattern or are there equal/better options?.
React seems philosophically opposed to services in the Angular sense, apparently preferring tight coupling of UI and logic.
But I have found a react-services module, which seems to offer what you are after:
• separate your component and application state by introducing a service layer that takes care of propagating changes through your application
• manage component dependencies in an explicit, testable way
• there's no events and no lifecycle management - everything is done automatically for you
• it's tiny and easy to understand - the core is less than 100 lines of code
https://medium.com/#alshdavid/react-state-and-services-edb95be48851
Here's an article showing how to do it with nothing but React Context and rxjs
I'm developing a react native application using flux which has a number of components and a number of stores. The application uses a javascript SDK which authenticates once against an online rest API. The SDK object returned is then authenticated for any future calls.
I can either call the rest API from actions or stores. How do I share that authenticated SDK object against a number of stores or actions? And which of the two places are best to call the API?
Use a Singleton.
If you are packing your modules with Browserify or Webpack, it should be simple to make a module exports object which encapsulates the SDK interface.
The Singleton approach is how it should be but it also should have some architectural pattern :). In fact the logic for creating API call, authenticating etc. should be neither in action itself, nor in the store.
In the flux architecture the guys from Facebook introduced also some "helper utilities" called Action creators - those are responsible for creating the right action and passing it to the dispatcher (they might need to have some web api call behind to get the action). A very nice explanation of this part of Flux is available here - including visual explanation:
http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html
So - all in all - have an ActionCreator singleton to prepare the actions for you and use it in your views in the place where you want to send action to the dispatcher.
Getting The Scope of Another Module to Dispatch Events;
Acyclical Directed Communication Network
EDIT: THIS QUESTION IS UNDER REFORMATION.
Intention
What I'm looking to do is fairly straight-forward. I have an Application Core module which looks like this:
var app, application = app = angular.module('app', ['session', 'validation', 'summary', 'participants', 'ngRoute']);
...where each dependency is a module with its own $rootScope (SEE COMMENTS BELOW).
I intend on implementing a Mediator -- not an EventHub. EventHubs are simply a skinny-waist to which subsystems can publish and subscribe to broadcast channels on a specific medium. What I want is a true Mediator -- which, according to GoF, actually manages security of how and where modules communicate, in a unicast model.
That said, I cannot solely rely on using $rootScope.$broadcast/$emit as this will allow any & every module to listen to events from other modules -- without any control or intervention (mediation) from a centralized mechanism.
Problem
The problem arises when there is one module firing an event, say, 'excuseFileLog' and other listening for 'excuseFileLog' -- while the mediator is listening to this event from one module and dispatching it for another. Mediator is listening for one module to say "please excuse the 'FileLog'" and telling another that "an excuseFile has been logged". This is very semantic, as excuse, File, and Log are each, both a verb and a noun. So when Mediator dispatches this same event that it, itself, is listening for -- we enter an Infinite Loop:
// mediator is the sole medium for channels
mediator.on('excuseFileLog', function(){
mediator.fire('excuseFileLog');
});
Solvent
Put simply, I need to be able to access each module's $rootScope and fire events on that module alone -- hopfully, without the need of creating a service that will have to be injected into every module; which will encumber the developer with having to remember to implement the service and creating slightly tighter coupling. If a service is involved, then I may as well implement my own mediator/eventing-system, as apposed to leveraging Angular's eventing system. As the rest of the team is somewhat novice, I would prefer to keep 'chores' to a minimum.
Any help is very appreciated :)