redux-socket.io-middleware

Another dead-simple middleware which allows you to connect Redux and Socket.io. It uses meta property of your action object to recognize whether send it to backend, or not.

Idea

• Whenever you want to send an event from Client to your Backend through socket.io,

use store.dispatch with regular action with meta object (see example actionCreator.js)

• Whenever you want to send and handle an event from your Backend to

Client - emit it on backend with socket.io in a form of regular action and it will be handled by forwarding it to store.dispatch() - your reducers should take care of the rest. Important side note - action object send thorough Socket.io must be standard javascript object literal. It can't be a function (so unfortunately thunk drops out).

Usage

Installation

``` npm install --save redux-socket.io-middleware ```

Client side

store.js ```javascript import socketIO from 'socket.io-client'; import socketIoMiddleware from 'redux-socket.io-middleware' const reducers = (...); const io = socketIO.connect(http://localhost:3030); const store = createStore( reducers, applyMiddleware(

socketIoMiddleware(io)

) ); ``` actionCreator.js ```javascript function addUserRequest(user){ return {

type: "ADD_USER_REQUEST",

meta: {remote: true},

user

} } function addUserRequestSuccess() {

return {

type: "ADD_USER_REQUEST_SUCCESS",       

} } function addUserRequestFailure() {

return {

type: "ADD_USER_REQUEST_FAILURE",       

} } ``` And then you dispatch this type of action like any other: yourReactComponentContainer.js ```javascript const mapDispatchToProps = function (dispatch) { return {

addUserRequest: (user) => dispatch(actionCreator.addUserRequest(user)),

}

} ```

Server side

If we share actionCreator.js between client and server we can youse it like below. Otherwise, just create action by hand. userController.js ```javascript io.on('connection', function (socket) {

socket.on("action", function (action) {

switch (action.type) {

case "ADD_USER_REQUEST":

return userService.save(action.user).then(

(user) => io.emit('action', actionCreator.addUserRequestSuccess()),

(err) => io.emit('action', actionCreator.addUserRequestFailure())

);

}

})

}); ```

Configuration

You can configure the name of channel which will be used for sending websocket messages. Default value is action. To change it, simply add second parameter when registering middleware: ```javascript import socketIoMiddleware from './redux-socket.io-middleware' const store = createStore( reducers, applyMiddleware(

socketIoMiddleware(io, "myRandomChannel")

) ); ``` and then on your backend side, listen on that string: ```javascript io.on('connection', function (socket) {

socket.on("myRandomChannel", function (action) {

/// ...

})

}); ``` Yeah, I know that this readme is much longer than a code itself :)