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