Need advice on redux and server-side updates

Question

I'm building an app that receives updates from an external source. (Let's say the updates are stock quotes, that come in sporadically, every 10-60 seconds.)

Each client page might display the full list of interesting stocks, or focus on a single stock. Components on any page should update as the server receives new data for stocks displayed on that page.

My questions:

1. Will react, react, react-redux modules handle the communication between the server-side updates and the client components in the browser out-of-the-box? (Obviously I will have to write the actions/reducers/etc.) Or will I also need to write code that communicates those updates from the server to the clients?

2. I envision starting up the server-side process that receives stock updates from the main server.js code that also fires off the listen(3000) call. How could that stock-update process get access to the redux store? (My confusion comes because in most of the Express examples I've read, the createStore() call is within the app.use('/', ...) so the store gets generated each time a new web request comes in.)

3. Any pointers to projects similar to what I want to do? Thanks.

Answer 1

[Answering my own question] The responses from various contributors above are correct and quite useful, but I have been (re)learning how to structure apps with react and redux. I wanted to share my new knowledge:

• Christophe Coenraets wrote a blog posting that exactly matches my use-case: Real Time Trader Desktop with React, Node.js, and Socket.io

• I write a blog posting that summarizes what I have learned about getting started with React programming in mid-2016: Getting Started with React Development

Answer 2

nope neither react no redux handles communication between serverside and react components (clientside)

• react works as an ui view
• redux manages application state

communication between server and client fall into actions and action creators in this case you could make an ajax call to server (by polling) and the state could be a boolean fetching, fetched,faliure all of which need to be managed in the store together with the response object.

---

Regarding the issue of serverside stock-update process,it doesn't matter since only the implementors understant what the initial state is hence the question to ask is does it matter to you that the createstore() is being called and what is it's initial state of the application. on your case the createStore could be configured in such a case that its an reducer that fetches the stock at the point in time from the main server.js

you may also want to check relay and graphql which comes with networking layer for communication to server by default all of which try to manage application state

Answer 3

1. You will have to write code that communicates updates from server to the clients. The best way to do this would be use websockets. You can use frameworks like http://socket.io/ etc.
2. The Express samples that you have come across that use createStore on the server side are for server side rendering. Accessing store here to push stock updates is not preferred.

In Brief, what you need to do is ,

1. Set up socket io or websocket server
2. On the client, set up a socket-io client. It waits for messages from server.
3. Whenever you get stock updates, send the data from server to client through socket io.
4. When the client receives the message, dispatch an action with the data and let redux flow handle the state/store.