Simpl Documentation

Simpl.world Documentation

  1. Docs
    2. Edit on Github

Pub/Sub Low-level Decorators

publishes() decorator

containers/Publisher.jsx

import {publishes} from 'simpl-react/lib/decorators/pubsub/publishes';

import MyComponent from '../components/MyComponent.react';

Publisher = publishes(topic, options = {})(MyComponent);

Presentational Component

components/SendMessage.jsx;

import React from 'react';


class SendMessage extends React.Component {
  onPressedKey(e) {
    if (e.charCode === 13) { // Enter key
      e.preventDefault();
      const node = this.refs.msgInput;
      this.props.publish({ args: [node.value] });
      node.value = '';
    }
  }
  render() {
    return (
      <input ref="msgInput" onKeyPress={(e) => this.onPressedKey(e)} type="text" />
    );
  }
});

SendMessage.propTypes = {
  publish: React.PropTypes.func
};

export default SendMessage;
Props

Container Component

SendMessageContainer.jsx

import { connect } from 'react-redux';

import {publishes} from 'simpl-react/lib/decorators/pubsub/publishes';

import SendMessage from '../components/SendMessage';

function mapStateToProps(state, ownProps) {
  return {};
}

function mapDispatchToProps(dispatch, ownProps) {
  return {
    onPublished(topic, args, kwargs, details, publicationID) {
      console.log(kwargs);
    }
  };
}

const PublisherSendMessage = publishes('com.example.sims.simpl-calc.chat')(SendMessage);

const SendMessageContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(PublisherSendMessage);

export default SendMessageContainer;
Props

subscribes() decorator

containers/Subscriber.jsx

import {subscribes} from 'simpl-react/lib/decorators/pubsub/subscribes';

import MyComponent from '../components/MyComponent';

Subscriber = subscribes(topics, options = {})(MyComponent);

Arguments:

Presentational Component

components/Results.jsx

import React from 'react';


const Result = function Result(result) {
  return (
    <tr key={result.id}>
      <td>{result.data.sum}</td>
      <td>{result.data.spread}</td>
      <td>{result.data.score}</td>
      <td>{result.data.totalScore}</td>
    </tr>
  );
};


const Result = function Result(props) {
  let results;

  if (props.data !== undefined) {
    results = props.data.map(Result);
  }

  return (
    <div>
      <h3>Results</h3>
      <table>
        <thead>
          <tr>
            <td>sum</td>
            <td>spread</td>
            <td>score</td>
            <td>total score</td>
          </tr>
        </thead>
        <tbody>{results}</tbody>
      </table>
    </div>
  );
};

export default Result;
Props

Container Component

containers/NotificationContainer.jsx

import { connect } from 'react-redux';

import {subscribes} from 'simpl-react/lib/decorators/pubsub/subscribes';

import Notification from '../components/Notification';


function mapStateToProps() {
  return {
  };
}

function mapDispatchToProps() {
  return {
    onReceived(route, args, kwargs, details) {
      console.log(arguments);
    },
  };
}

const SubscribedNotification = subscribes(
  'com.example.sims.simpl-calc.chat'
)(Notification);

const NotificationContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(SubscribedNotification);

export default NotificationContainer;

containers/MyApp.jsx

import React from 'react';
import NotificationContainer from '../containers/NotificationContainer';

const App = function App() {
  return (
    <NotificationContainer
      onReceived={(route, args, kwargs, details) => { console.table([kwargs]) } }
    />
  );
};

Props