Norwegian Puffin Movies

    pusher-redux-plus

    0.2.0 • Public • Published

    pusher-redux

    Integration of Pusher into Redux

    Installation

    You can download this by executing

    npm -i S pusher-redux

    Usage

    Configure Pusher

    
    import { configurePusher } from 'pusher-redux';
    ...
    const options = { // options are... optional
      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();
      }
      
      // upon receiving event 'some_event' for channel 'some_channel' pusher-redux is going to dispatch action NEW_ORDER
      // you can bind multiple actions for the same event and it's gonna dispatch all of them
      subscribe() {
        subscribe('some_channel', 'some_event', NEW_ORDER);
      }
      
      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
        };
    
    

    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 = { // options are... optional
      authEndpoint: '/authenticate/me'
    }
    const store = configureStore(initialState);
    delayConfiguration(store, API_KEY, options);
    
    

    And once user information is available

    
    import { startConfiguration } from 'pusher-redux';
    ...
    startConfiguration({ // pass options
      auth: {
        params: {
          auth_token: user.authToken
        }
      }
    });
    
    

    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

    Contributing

    You are welcome to import more features from pusher-js

    License

    This code is released under the MIT License.

    Install

    npm i pusher-redux-plus

    DownloadsWeekly Downloads

    3

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • ex7r3me