pusher-redux
Integration of Pusher into Redux
Installation
You can download this by executing
npm install --save pusher-redux
Usage
Configure Pusher
;...const options = // options are... optional authEndpoint: '/authenticate/me'const store = ;;
Use it in your component
;;...Component { superprops context; thissubscribe = thissubscribe; thisunsubscribe = thisunsubscribe; } { this; } { this; } // upon receiving event 'some_event' for channel 'some_channel' pusher-redux is going to dispatch action NEW_ORDER // add additional params which will be merged into pusherAction and dispatched along with it // you can bind multiple actions for the same event and it's gonna dispatch all of them { // your additionalParams const additionalParams = {} ; // access it within the data object = { // type: String, // channel: String, // event: String, // data: Object, // additionalParams: Any // } } { ; } ...
Change state in your reducer
;... { ... case NEW_ORDER: return ...state actiondataorder; ...}
Format of actions
Pusher-redux dispatches actions of the following format:
return type: actionType channel: channelName event: eventName data: data ;
Get subscribed channels
;... { // gets the channel from the client var myChannel = ; // triggers a client event myChannel;}
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:
;...const options = // options are... optional authEndpoint: '/authenticate/me'const store = ;;
And once user information is available
;...;
Monitor Connection Status
Upon connection status pusher-redux emits actions. You can listed to them.
;... { ... 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.
;
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.