Created
June 28, 2018 00:37
-
-
Save markerikson/3df1cf5abbac57820a20059287b4be58 to your computer and use it in GitHub Desktop.
Redux socket middleware example usage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const createMySocketMiddleware = (url) => { | |
return storeAPI => { | |
let socket = createMyWebsocket(url); | |
socket.on("message", (message) => { | |
storeAPI.dispatch({ | |
type : "SOCKET_MESSAGE_RECEIVED", | |
payload : message | |
}); | |
}); | |
return next => action => { | |
if(action.type == "SEND_WEBSOCKET_MESSAGE") { | |
socket.send(action.payload); | |
return; | |
} | |
return next(action); | |
} | |
} | |
} | |
// later, in your app | |
function sendSocketMessage(message) { | |
return { | |
type : "SEND_WEBSOCKET_MESSAGE", | |
payload : message | |
} | |
} | |
class MyComponent extends React.Component { | |
handleClick = () => { | |
this.props.sendSocketMessage("This goes to the server"); | |
} | |
} | |
export default connect(null, {sendSocketMessage})(MyComponent) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@n-ii-ma probably best to ask over in
#redux
in Reactiflux, but typically you'd dispatch an action and have the listener do anawait take(thatAction)
and then cancel itself / return.