Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
pusher-redux
Advanced tools
Integration of Pusher into Redux
You can download this by executing
npm install --save pusher-redux
import { configurePusher } from 'pusher-redux';
...
const options = { // options are... optional
authEndpoint: '/authenticate/me'
}
const store = configureStore(initialState);
configurePusher(store, API_KEY, options);
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);
}
...
}
import { NEW_ORDER } from '../pusher/constants';
...
function orderReducer(state = initialState.orders, action) {
...
case NEW_ORDER:
return [...state, action.data.order];
...
}
Pusher-redux dispatches actions of the following format:
return {
type: actionType,
channel: channelName,
event: eventName,
data: data
};
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);
}
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
}
}
});
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};
...
}
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';
Pusher-redux accepts all the same options that pusher-js does
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.
You are welcome to import more features from pusher-js
This code is released under the MIT License.
FAQs
Integration of Pusher into Redux
We found that pusher-redux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.