Instantly share code, notes, and snippets.

Embed
What would you like to do?
Communication Between Independent Components in React using PubSubJS
/**
* PubSubReactExample.jsx
* https://anthonymineo.com/communication-between-independent-components-in-react-using-pubsubjs/
*
* Anthony Mineo (@Mineo27)
*
* Disclaimer: The goal was to make this example easy to follow.
* Obviously, there are a number of optimizations that can be done to the code below.
**/
// Imports / Requires
import React from 'react';
import PubSub from 'pubsub-js';
import request from 'then-request';
import DropzoneComponent from 'react-dropzone-component';
// Use your preferred method for loading a component's CSS
require('dropzone/dist/min/dropzone.min.css');
/**
* Component that makes a request for the list of files
* @class FileList
*/
export class FileList extends React.Component{
constructor(props){
super(props);
this.state = {
fileCollection: [],
endpoint: 'http://website.com/api/filelist.json'
}
}
componentWillMount(){
// This is where we subscribe this class to the 'GET FILES' subscription.
// once a publish event for 'GET FILES' has been fired, FileList.subscriber() will be triggered.
this.token = PubSub.subscribe('GET FILES', this.subscriber.bind(this));
}
componentDidMount(){
PubSub.publish('GET FILES', this.token);
}
componentWillUnmount(){
PubSub.unsubscribe(this.token);
}
// The function that is subscribed to the publisher
subscriber(msg, data){
var self = this;
request('GET', 'http://website.com/api/endpoint.json').done(function(result){
this.setState({
fileCollection: result
});
}.bind(self));
}
// return our files in an list
returnFileInfo(){
return this.state.fileCollection.map(function(file){
return <li key={file.id}>
<a href={file.url}>
<strong>{file.name}</strong>
</a>
</li>;
});
}
render(){
return <ul>{this.returnFileInfo()}</ul>;
}
}
/**
* Dropzone File Uploader Component
* @class FileUploader
*/
export class FileUploader extends React.Component {
constructor(props){
super(props);
// Our DropzoneComponent config
this.state = {
componentConfig : {
postUrl: 'endpoint.cfm?action=uploadFile'
},
djsConfig:{},
eventHandlers:{
success: this.updateFileList.bind(this)
}
};
}
updateFileList(response){
// Example response object from our server could be
/*
{
id:10,
url:'https://anthonymineo.com/mycoolimage.png',
name:'Making beer'
}
*/
// You can also publish strings if you like
// The magic publish event
// This lets the subscribers know that they need to do their job
// and trigger any events that need to take place
/*
PubSub.publish('GET FILES', response);
*/
PubSub.publish('GET FILES', 'EAT PIE');
}
render(){
return <DropzoneComponent
config={this.state.componentConfig}
eventHandlers={this.state.eventHandlers}
djsConfig={this.state.djsConfig} />;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment