I'm building an app that receives updates from an external source. (Let's say the updates are stock quotes, that e 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 munication between the server-side updates and the client ponents 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 municates 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 es 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 es in.)

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

I'm building an app that receives updates from an external source. (Let's say the updates are stock quotes, that e 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 munication between the server-side updates and the client ponents 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 municates 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 es 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 es in.)

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

• javascript
• reactjs
• redux
• react-redux

• Thanks for these thoughtful answers. To continue the discussion, it seems that: 1. The server should have a store that records the updates from the external source so that it has the actual/current state. 2. When a new client connects, server-side rendering can fill all the ponents with data from the current store. 3. As new updates arrive to the server, I need to write code that updates the server-side store, but also sends the new info any connected clients. I should check out socket.io and relay/graphql as alternate means of doing this. True? – richb-hanover Commented May 22, 2016 at 1:51
• Do you mean database when you say store on the server ? Then yes. Sure you can store the stock updates in the database. You can send these values to the client. As a first step you can probably leave that out for now. For a more sophisticated you might probably want a another thread/process that periodically updates the database with the latest stock updates. It kind of servers as a temporary cache for the clients. You dont need to have any redux store on the server side. – agenthunt Commented May 23, 2016 at 8:35

3 Answers 3

1. You will have to write code that municates 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 e 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.

nope neither react no redux handles munication between serverside and react ponents (clientside)

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

munication 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 es with networking layer for munication to server by default all of which try to manage application state

[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