Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
All the methods associated with the socket
All the methods and events associated with the socket
Should the socket attempt to open, the following redux event is dispatched
All the events associated with the socket
import { socketActionTypes } from '@trixtateam/phoenix-to-redux';
const { SOCKET_OPEN } = socketActionTypes;import { combineReducers } from 'redux';
import { phoenixReducer } from '@trixtateam/phoenix-to-redux';
export default function createReducer() {
const rootReducer = combineReducers({
phoenix: phoenixReducer,
});
return rootReducer;
}import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './rootSaga';
import createReducer from './reducers';
export default function configureStore(initialState = {}) {
const reduxSagaMonitorOptions = {};
// Makes redux connected to phoenix channels
const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];
const enhancers = [];
const store = configureStore({
reducer: createReducer(),
middleware: [
...getDefaultMiddleware({
thunk: false,
immutableCheck: {
ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
},
serializableCheck: false,
}),
...middlewares,
],
devTools:
/* istanbul ignore next line */
process.env.NODE_ENV !== 'production' ||
process.env.PUBLIC_URL.length > 0,
enhancers,
});
sagaMiddleware.run(rootSaga);
return store;
}import * as React from 'react';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import {
connectPhoenix
} from '@trixtateam/phoenix-to-redux';
import Providers from './Providers';
import Routes from './Routes';
export function App() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(connectPhoenix({ domainUrl:'localhost:4000', params: {} }))
}, [dispatch]);
return (<Providers>
<Routes />
</Providers>)
}
export default App;
Should an error occur from the phoenix socket, the following redux event is dispatched
Should the socket attempt to disconnect, the following redux event is dispatched
import { socketActionTypes } from '@trixtateam/phoenix-to-redux';
const { SOCKET_ERROR } = socketActionTypes;import { socketActionTypes } from '@trixtateam/phoenix-to-redux';
const { SOCKET_DISCONNECT } = socketActionTypes;This example will quickly connect your phoenix socket, and show the simple basic socket events.
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);
}Should the socket attempt to connect, the following redux event is dispatched
import { socketActionTypes } from '@trixtateam/phoenix-to-redux';
const { SOCKET_CONNECT } = socketActionTypes;All the methods associated with the socket channels
Should the socket attempt to close, the following redux event is dispatched
import { socketActionTypes } from '@trixtateam/phoenix-to-redux';
const { SOCKET_CLOSE } = socketActionTypes;Should an error occur from the phoenix socket channel, the following redux event is dispatched. Invoked if the socket connection drops, or the channel crashes on the server.
import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_ERROR } = channelActionTypes;All the events associated with the socket channels
Should an error occur from the phoenix socket channel, the following redux event is dispatched. Error response after joining the phoenix channel.
Should a phoenix channel be explicitly closed on the server or the channel was explicitly closed by calling channel.leave(). The following redux event is dispatched
import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_CLOSE } = channelActionTypes;import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_JOIN_ERROR } = channelActionTypes;Should an error occur from the phoenix socket channel, the following redux event is dispatched. Timeout error response after joining the phoenix channel.
import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_TIMEOUT } = channelActionTypes;Should an error occur from the phoenix socket channel, the following redux event is dispatched. Error response after pushing data to phoenix channel.
import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_PUSH_ERROR } = channelActionTypes;After joining a phoenix channel, the following redux event is dispatched.
import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_JOIN } = channelActionTypes;
After phoenix channel is left. The following redux event is dispatched
import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_LEAVE } = channelActionTypes;