Real time data flow with Redux and Socket.io

Holly
Holly
Dec 12, 2016 · 8 min read
Socket server
create the socket server
Client connection to Socket server
Wrap the connection in an exported function
start the chat
Add the addResponse action creator
Handle the ADD_RESPONSE action type
Refactor the reducers to separate state
update message entry box to send message on submits
Add message to the action creator

Adding the Redux chat middleware

Add the chat middleware
Add the chat middleware
Add a user id for each connection
Add handler for start event
Add the user id action creator
Add the userId reducer function
Add the user id to the initial state
Map user id to component props
Update message to incorporate userId
Refactored reducer functions
Refactored chat middleware
Add userId check in message list component

Styling the components

Style app component
Import the styles
Style message entry box
Style message list component

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade