Redux middleware and reducer for creating a websocket connection.
Features
- Send messages to the server simply by adding
sendToServer: true
to your actions. - Messages received from the server are automatically dispatched as actions.
- Automatically tries to reconnect when the connection drops.
- The
state.connection.connected
boolean is available in your store. - Optional: Use promises if you are expecting a response from the server after a certain message.
npm install --save redux-reconnecting-socket
import { applyMiddleware, createStore } from 'redux';
import { reduxReconnectingSocket } from 'redux-reconnecting-socket';
const store = createStore(
rootReducer,
applyMiddleware(
// ... other middleware
reduxReconnectingSocket()
)
);
Only needed if you want to use the state.connection.connected
boolean.
import { combineReducers } from 'redux';
import {
reduxReconnectingSocketReducer,
defaulReduxReconnectingSocketState
} from 'redux-reconnecting-socket';
export const rootReducer = (history) => combineReducers({
// ... other reducers
connection: reduxReconnectingSocketReducer,
});
export const defaultAppState = {
// ... other reducers
connection: defaulReduxReconnectingSocketState,
};
import { socketConnect } from 'redux-reconnecting-socket';
class App extends React.Component {
componentDidMount() {
const { dispatch } = this.props;
dispatch(socketConnect('ws://localhost:4000/ws'));
}
...
dispatch({
sendToServer: true,
type: 'MY_ACTION',
payload: {
message: 'Hello server!'
}
});
Whenever the server sends a message over the web socket, the message is automatically dispatched as an action.
const request = dispatch({
sendToServer: true,
promise: true,
type: 'MY_ACTION',
payload: {
message: 'Hello server!'
}
});
request.then(
(actionFromServer) => console.log('Success, received this action from the server', actionFromServer),
(actionFromServer) => console.log('Received a message with type: \'ERROR\' from the server:', actionFromServer)
);
Whether the promise will be resolved or rejected depends on the error boolean in the message from the server:
{
type: 'MY_SERVER_RESPONSE',
requestId: 1, // the same request id that was sent to the server
error: true, // true would cause the promise to be rejected
}
A numeric requestId
will automatically be generated and added in the message to
the server. When the server sends a message that includes the same requestId
,
the request promise will be completed.
Additionally, you have the option to cancel requests:
const request = dispatch({
sendToServer: true,
promise: true,
type: 'MY_ACTION',
payload: {
message: 'Hello server!'
}
});
request.cancel();
Three things will happen when you cancel
a request:
- The message from the server with this
requestId
will be ignored. It will not be dispatched. - The
request
promise will be rejected. - A
CANCEL_REQUEST
message will be sent to the server:
{
type: 'CANCEL_REQUEST',
requestId: 1
}