Connected-react-socket NPM

connected-react-socket

Lightweight Provider for socket.io connection for react-redux application. You can see the demo.

Install

install it by

npm i --save connected-react-socket

yarn add  connected-react-socket

ConnectedSocket

Add socket middleware with passing socket client

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import io from "socket.io-client";
import { socketReducer, socketMiddleware } from "connected-react-socket";

export const socket = io();

const reducers = combineReducers({
  socket: socketReducer
});

const store = createStore(
  reducers,
  compose(applyMiddleware(socketMiddleware(socket)))
);

export default store;

Then wrap componet by withSocket HOC and use socketEvent prop

const Display = props => {
  const { socketEvent } = props;
  return (
    <div>
      // Will print socket event name
      <div>{socketEvent.type}</div>
      // Let's print recieved messages
      <div>{socketEvent && socketEvent.data.join(",")}</div>
    </div>
  );
};
const mapStateToProps = state => {
  return {
    socketEvent: state.socket
  };
};
const mapDispatchToProps = dispatch => {
  return {
    emit: (type, ...message) => dispatch(emitMessage(type, message))
  };
};
const ConnectedDisplay = connect(
  mapStateToProps,
  mapDispatchToProps
)(Display);

Last one: dd socket provider under the redux provider

...
<ReduxProvider store="{store}">
  <ConnectedSocket socket="{socket}"> <ConnectedDisplay /> </ConnectedSocket>
</ReduxProvider>
...

SocketProvider

Create component and wrap it with HOC

const Display = props => {
  const { socketEvent } = props;
  return (
    <div>
      // Will print socket event name
      <div>{socketEvent.type}</div>
      // Let's print recieved messages
      <div>{socketEvent && socketEvent.data.join(",")}</div>
    </div>
  );
};

const DisplayEvent = withSocket(Display);

And add socket provider

<SocketProvider socket={socket}>
  <DisplayEvent name="WithSocket" />
</SocketProvider>

Props

SocketProvider

Prop	Decription	Default
socket	socket.io instance	null
shouldReconnect	Tells provider to reconect to socket on mount	false
shouldDisconnect	Tells provider to close connection on unmount	false

ConnectedSocket

Prop	Decription	Default
socket	socket.io instance	null
shouldReconnect	Tells provider to reconect to socket on mount	false
shouldDisconnect	Tells provider to close connection on unmount	false