Found React-Agent while googling for a single library to manage client and server side states without writing my own solution.
From the repo:
React Agent is a JavaScript library for your client store, server querying, and database management. It can be included in any React project without conflict with other state management tools or REST APIs.
The popular conceptualization of state management stores state in two places: data on the client-side and data on the server-side.
To connect these, front-end and back-end developers usually write a lot of code such as HTTP requests, controllers, and routes. It can get complicated.
https://github.com/yokyak/react-agent/raw/master/docs/imgs/diagram-before.gif
In contrast, React Agent serves as a communication channel between the client and the server. It abstracts state transfer to make it super easy to interact between the client and server.
https://github.com/yokyak/react-agent/raw/master/docs/imgs/diagram-after.gif
- The API is simple - It has a single, central store that triggers React renders when updated from any component.
- Features a single server endpoint - All server communication is handled through a single Web Socket connection without the need for RESTful routes.
- Server actions can be SQL query strings or just arbitrary functions that call to any API, and the response automatically gets sent back to the client.
- Clients can listen for server actions triggered by other clients, allowing for real-time data updates.
- Time travel debugging is included - Since the client store is built upon Redux, the Redux DevTools work out of the box.
The API documentation is available here react-agent/documentation.md at master · yokyak/react-agent · GitHub