This example will quickly connect your phoenix socket, and show the simple basic socket events.
After installation and the setting up of the middleware, you can simply copy this code for your root Saga.
import {
all,
call,
fork,
put,
select,
takeEvery,
takeLatest,
} from 'redux-saga/effects';
import {
socketActionTypes,
connectPhoenix
} from '@trixtateam/phoenix-to-redux';
/**
* Should the socket attempt to open, this action is dispatched to the
* phoenix reducer
* @param {Object} params - parameters
* @param {string} params.domainKey - domain for socket
* @param {Object} params.socket = socket being opened
* @param {boolean} params.params
*/
export function* socketConnectedSaga({ socket,params, domainKey }) {
console.info('socketConnectedSaga',{ socket,params, domainKey });
}
/** Should an error occur from the phoenix socket, this action will be dispatched
* @param {Object} params - parameters
* @param {string} params.error
* @param {string} params.socketState
* @param {string} params.domainKey - domain for socket
*/
export function* socketErrorSaga({ error, socketState, domainKey }) {
// here you should check if your token is valid or not expired, if not
// disconnect phoenix
console.error('socketErrorSaga',{ error, socketState, domainKey });
}
/**
* Should the socket attempt to close, this action is dispatched to the
* phoenix reducer
* @param {Object} params - parameters
* @param {Object} params.socket = socket being closed
* @param {string} params.domainKey - domain for socket
* @param {object} params.params - socket.params()
*/
export function* socketCloseSaga({ params, socket, domainKey }) {
console.info('socketCloseSaga',{ params, socket, domainKey });
}
/**
* After phoenix socket disconnects
* @param {Object} params - parameters
* @param {Object} params.socket = socket being disconnected
* @param {string} params.domainKey - domain for socket
* @param {Object} params.params - socket.params()
*/
export function* socketDisconnectionSaga({ params, socket, domainKey }) {
console.info('socketDisconnectionSaga',{ params, socket, domainKey });
}
export function* connectSocketSaga() {
yield put(connectPhoenix({ domainUrl: 'localhost:4000', params: {} }));
}
export default function* defaultSaga() {
yield call(connectSocketSaga);
yield takeEvery(
socketActionTypes.SOCKET_DISCONNECT,
socketDisconnectionSaga
);
yield takeEvery(socketActionTypes.SOCKET_OPEN, socketConnectedSaga);
yield takeEvery(socketActionTypes.SOCKET_ERROR, socketErrorSaga);
yield takeEvery(socketActionTypes.SOCKET_CLOSE, socketCloseSaga);
}