I am working on an application which has a dashboard and a calendar.
The application works with websocket.
I am trying to come up with an architecture where the onmessage callbacks for websocket responses are routed to the right component.
For example dashboard messages are routed to dashboard component and and calender messages are routed to the calendar component.
I currently have an AppContext which is the outer most context where I have all the logic and the websocket instance and onmessage is implelemented in the AppContext.
When I hear a message I do my logic and set the states or zustand store related stuff in AppContext. But the onmessage is getting bigger and bigger.
Sure I can just put things in the util files and separate the functions but Ideally I would like the messages related the dashboard to be handled in dashboard and calendar in calendar componenets.
I have 3 Ideas.
-
I can use redux/reducers but use it as a messaging bus where I dispatch the message that I hear from onmessage in AppContext and dispatch it and the reducers listening on that message handles the logic. So if you create a reducer in Dashboard it handles the messages destined to it.
-
I can use a some Messaging Bus and implement the same thing as I mentioned in the previous paragraph.
-
I can create Map of function call backs in the Appcontext and when Dashboard useEffect triggers I register a local function that belongs to Dashboard,say “handlemessage”
And on onmessage I can trigger that called back and logic is handled in the Dashboard.
Sending messages is easy but handling the responses it turning into a nightmare. Where the logic is getting bigger and bigger in the AppContext.
I need some advice. Thanks in advance.