Last active
October 11, 2018 08:48
-
-
Save amineo/c4b01986952899c3fb299580e4de481f to your computer and use it in GitHub Desktop.
Communication Between Independent Components in React using PubSubJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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