redux-channels
v0.1.0
Published
Redux integration for websocket channels
Downloads
5
Readme
redux-channels
A provider and connect for getting websocket channels(ie, Socket.io/Phoenix/ActionCable) working with Redux.
This library was heavily inspired by and borrows code from react-redux and react-apollo.
Usage
Phoenix channels
Phoenix channels are my primary target with the library.
import React from 'react';
import { render } from 'react-dom';
import { Socket } from 'phoenix';
import { SocketProvider } from 'redux-channels';
import configureStore from './store/configureStore';
import App from './containers/App';
const store = configureStore();
render(
<SocketProvider store={store} socket={socket}>
<App />
</SocketProvider>,
chatDOM
);
import { connect } from 'redux-channels';
class App extends React.Component {
static propTypes = {
messages: PropTypes.object,
actions: PropTypes.object,
someChannel: PropTypes.object
};
constructor(props) {
super(props);
const { actions, someChannel } = props;
this.someChannel = someChannel;
// Setup all your channel listening here
}
}
const mapStateToProps = (state) => ({
messages: state.messages
});
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(action, dispatch)
});
const mapSocketToProps = ({ socket, state }) => ({
someChannel: socket.channel('some', { username: state.auth })
});
export default connect({
mapStateToProps,
mapDispatchToProps,
mapSocketToProps
})(App);
socket.io
Use namespaces in socket.io to have different channels and follow the general pattern above.