pusher-redux
Integration of Pusher into Redux
Installation
You can download this by executing
npm install --save pusher-redux
Usage
Configure Pusher
import { configurePusher } from 'pusher-redux';
...
const options = {
authEndpoint: '/authenticate/me'
}
const store = configureStore(initialState);
configurePusher(store, API_KEY, options);
Use it in your component
import { subscribe, unsubscribe } from 'pusher-redux';
import { NEW_ORDER } from '../pusher/constants';
...
export class MyPage extends React.Component {
constructor(props, context) {
super(props, context);
this.subscribe = this.subscribe.bind(this);
this.unsubscribe = this.unsubscribe.bind(this);
}
componentWillMount() {
this.subscribe();
}
componentWillUnmount() {
this.unsubscribe();
}
subscribe() {
const additionalParams = () => {}
subscribe('some_channel', 'some_event', NEW_ORDER, additionalParams);
}
unsubscribe() {
unsubscribe('some_channel', 'some_event', NEW_ORDER);
}
...
}
Change state in your reducer
import { NEW_ORDER } from '../pusher/constants';
...
function orderReducer(state = initialState.orders, action) {
...
case NEW_ORDER:
return [...state, action.data.order];
...
}
Format of actions
Pusher-redux dispatches actions of the following format:
return {
type: actionType,
channel: channelName,
event: eventName,
data: data
};
Get subscribed channels
import { getChannel } from 'pusher-redux';
...
function emitClientEvent(eventName, eventData) {
var myChannel = getChannel('some-channel-name');
myChannel.trigger(eventName, eventData);
}
Delayed Configuration
Sometimes you want to authenticate user for receiving pusher information, but you don't have user credentials yet.
In this case you can do the following:
import { delayConfiguration } from 'pusher-redux';
...
const options = {
authEndpoint: '/authenticate/me'
}
const store = configureStore(initialState);
delayConfiguration(store, API_KEY, options);
And once user information is available
import { startConfiguration } from 'pusher-redux';
...
startConfiguration({
auth: {
params: {
auth_token: user.authToken
}
}
});
Monitor Connection Status
Upon connection status pusher-redux emits actions. You can listed to them.
import { CONNECTED, DISCONNECTED } from 'pusher-redux';
...
function connectionStateReducer(state = initialState, action) {
...
case CONNECTED:
return {...state, connected: true};
case DISCONNECTED:
return {...state, connected: false};
...
}
React Native
If you want to use react-native then replace ALL imports of pusher-redux
with pusher-redux/react-native
e.g.
import { startConfiguration } from 'pusher-redux/react-native';
Options
Pusher-redux accepts all the same options that pusher-js does
Old Webpack
If your webpack version does not support resolve.mainFields and for some reason you can't specify target: 'browser'
instead of using import { configurePusher } from 'pusher-redux';
you can use import { configurePusher } from 'pusher-redux/legacy-webpack';
Beware that in this case if you compile your code for Node.JS environment it is going to fail.
CHANGELOG
0.3.2
- Added legacy webpack support
0.3.0
- Migrated to pusher-js 4.X.X
- Added CONNECTED and DISCONNECTED actions to monitor connected state
Contributing
You are welcome to import more features from pusher-js
License
This code is released under the MIT License.