redux-phoenix-middleware

Declarative automatic bidirectional maping between Redux Actions and Phoenix Channel Messages

Example

import {
    createPhoenixReducer,
    createPhoenixMiddleware,
    phoenixSocketStateSelector,
    phoenixChannelStateSelector,
    phoenixEventActionType,
} from 'redux-phoenix-middleware';
 
const phoenixReducer = createPhoenixReducer();
const phoenixMiddleware = createPhoenixMiddleware({
    sockets: {
        socket: {
            endPoint: BASE_URL + '/socket',
            channels: {
                'room:lobby': true,
            },
        },
    },
});
 
// Keeps a log of messages sent to the `lobby` room
const messagesReducer = (state = [], action) => {
    // Got a channel event, could've been sent like `broadcast!(socket, "message", %{ ... })`
    if (action.type === phoenixEventActionType('socket', 'room:lobby', 'message')) {
        return state.concat(action.payload);
    }
 
    return state;
};
 
const store = createStore(combineReducers({
    messages: messagesReducer,
    phoenix: phoenixReducer,
}), initialState, applyMiddleware(phoenixMiddleware));
 
// Somwhere else:
 
const state = store.getState();
 
phoenixSocketStateSelector(state.phoenix, 'socket') === 'open'; // or 'closed'
phoenixChannelStateSelector(state.phoenix, 'socket', 'room:lobby') === 'joined'; // or 'closed', 'errored'

Install

yarn add redux-phoenix-middleware