Giter VIP home page Giter VIP logo

pusher-redux's Introduction

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 = { // 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
  // 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
  subscribe() {
    // your additionalParams
    const additionalParams = () => {}

    subscribe('some_channel', 'some_event', NEW_ORDER, additionalParams);

    // access it within the data object = {
    //  type: String,
    //  channel: String,
    //  event: String,
    //  data: Object,
    //  additionalParams: Any
    // }
  }

  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) {
  // gets the channel from the client
  var myChannel = getChannel('some-channel-name');

  // triggers a client event
  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 = { // 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
    }
  }
});

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.

pusher-redux's People

Contributors

jfulse avatar koox00 avatar malonehedges avatar matthewcallis avatar meph1k avatar peter-pogocarshare avatar sammolokanov avatar therusskiy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

pusher-redux's Issues

Support ES6

Are you going to rewrite your library to ES6 syntax using classes?

Security Vulnerability

Hi,

Github is sending me notifications that there is a high-severity security vulnerability in this package.

from github:

known high severity security vulnerability detected in lodash.template < 4.5.0 defined in yarn.lock.
--
yarn.lock update suggested: lodash.template ~> 4.5.0.
Always verify the validity and compatibility of suggestions with your codebase.

Looks like it should just be a dependency upgrade. Is there any easy way for you to upgrade the dependency in the pusher-redux package? Is there an easy way for me to force the dependency to be a higher version on my end?

Apologies if I am overlooking some obvious solution, I'm not great at packaging etc.

Cheers,
peter

On Pusher connected event dispatch a redux action

Hi,
I think it would be very useful to be able to dispatch a redux action upon pusher connect.
My usecase is that I need the socket id, which pusher returns upon connection, to save it in the redux store.

This is particulary helpful in the case that you want to emit events to all, even me, but exclude only the connection with the particular socket id.

ReferenceError: window is not defined

Hi, your library works great on development - very happy! My nodejs/npm isn't my primary skill set, so let me know if I'm making any noob errors. I'm working on a project that uses webpack, react and redux.

I'm using pusher-redux and installed pusher-js separately since (IIRC) it oddly didn't install automatically as a dependency. The library works great on dev, though it does give me the following error:

var btoa = (window).btoa || function (b) {
                         ^
ReferenceError: window is not defined
at Object.<anonymous> (/home/user/project/node_modules/pusher-redux/node_modules/pusher-js/dist/web/pusher.js:890:27)
at __webpack_require__ (/home/user/project/node_modules/pusher-redux/node_modules/pusher-js/dist/web/pusher.js:38:30)
at Object.<anonymous> (/home/user/project/node_modules/pusher-redux/node_modules/pusher-js/dist/web/pusher.js:638:17)
at __webpack_require__ (/home/user/project/node_modules/pusher-redux/node_modules/pusher-js/dist/web/pusher.js:38:30)
....<snip>

This is the identical error to this error on pusher-js.

I see the error happening on the dev box, but npm start -s doesn't choke on it, and runs things fine anyway. However, when I run npm run build, the error is fatal and it doesn't complete the process of generating the resulting dist files.

Versions:
"pusher-redux": "0.1.1"

Do you have any suggestions?

Many thanks!

Support for React-Native?

Nice stuff. Looks like it's just a subtle adjustment to make it ReactNative compliant

import Pusher from 'pusher-js/react-native';

Unsubscribe from a channel

AFAICT there is no way to unsubscribe from a channel, it would be a nice feature to have though.

I have done a naive implementation, can you please check it out?

How to trigger an event ?

Hey there, I checked the documentation, seems there is no way i can trigger an event or get the pusher channel so i can trigger events on my own. Is there any way ? Or its not supported at all

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.