Add export for dataSubscriptionRequest

README.md

@@ -102,12 +102,12 @@ const config = createConfig();
 // config.set(...)
 //
 
-export default createDataSubscription(config);
+export const { withDataSubscription, dataSubscriptionRequest } = createDataSubscription(config);
 ```
 
 ```javascript
 import React from "react";
-import withDataSubscription from "./withDataSubscription";
+import { withDataSubscription } from "./withDataSubscription";
 
 class MyComponent extends React.Component {
   componentDidMount() {
@@ -179,7 +179,7 @@ Polling means the same request needs to be made with some interval. Data subscri
 
 ```javascript
 import React from "react";
-import withDataSubscription from "./withDataSubscription";
+import { withDataSubscription } from "./withDataSubscription";
 
 class MyComponent extends React.Component {
   componentDidMount() {
@@ -236,7 +236,7 @@ Sometimes there's a need to make several requests in order to gather all require
 
 ```javascript
 import React from "react";
-import withDataSubscription from "./withDataSubscription";
+import { withDataSubscription } from "./withDataSubscription";
 
 class MyComponent extends React.Component {
   componentDidMount() {
@@ -305,7 +305,7 @@ Sometimes one request is dependent on the data returned by another one. Since al
 ```javascript
 import React from "react";
 import { get } from "lodash";
-import withDataSubscription from "./withDataSubscription";
+import { withDataSubscription } from "./withDataSubscription";
 
 class MyComponent extends React.Component {
   componentDidMount() {
@@ -387,7 +387,7 @@ If you're not interested in handling request's `isLoading`, `isRefreshing` etc.
 
 ```javascript
 import React from "react";
-import withDataSubscription from "./withDataSubscription";
+import { withDataSubscription } from "./withDataSubscription";
 
 class MyComponent extends React.Component {
   componentDidMount() {
@@ -437,7 +437,7 @@ The best place to invoke data transformation is inside `responseCallback` becaus
 
 ```javascript
 import React from "react";
-import withDataSubscription from "./withDataSubscription";
+import { withDataSubscription } from "./withDataSubscription";
 
 class MyComponent extends React.Component {
   componentDidMount() {
@@ -489,6 +489,27 @@ class MyComponent extends React.Component {
 export default withDataSubscription(MyComponent);
 ```
 
+## Get data outside of React
+In some cases, it may be convenient to make a request outside of React. We can do that while still getting the benefits of this library by using `dataSubscriptionRequest`.
+In this example, we create a function that returns a promise that resolves with the data subscription. If this function is used in multiple places, it will only make one API call.
+If there are React components using `withDataSubscription` to request the same data, it will share the API response among them as well.
+
+```javascript
+import { dataSubscriptionRequest } from './withDataSubscription';
+
+export function getTodos() {
+  return new Promise((resolve, reject) => {
+    dataSubscriptionRequest("/getTodos", todos => {
+      if (todos.isLoaded) {
+        resolve(todos.payload);
+      } else if (todos.isError) {
+        reject(todos.error);
+      })
+    });
+  });
+}
+```
+
 # Contributions
 Feel free t submit a PR for any enhancements. The repo contains a playground for testing:
 - Demo server: `./test/server.js`

src/createDataSubscription.jsx

@@ -71,5 +71,8 @@ export default config => {
 
   hoc.dump = () => store.dump();
 
-  return hoc;
+  return {
+    withDataSubscription: hoc,
+    dataSubscriptionRequest: store.request,
+  };
 };

src/store/store.js

@@ -49,6 +49,15 @@ class Store {
   dump = () => {
     return cloneDeep(this._store);
   }
+
+  request = (endpoint, updatedCallback) => {
+    const subscription = this.createSubscription(endpoint);
+    subscription.run();
+
+    subscription.on(Subscription.events.UPDATED, () => {
+      updatedCallback(subscription.getState());
+    });
+  }
 
   _tryCleanUpEntity = hash => {
     if (!this._store[hash]) return;

src/store/subscription.js

@@ -6,7 +6,7 @@ import Entity from "./entity";
 import createRequest from "../util/request";
 
 const TRUE_FUNC = () => true;
-const EMPTY_FUNC = () => {};
+const EMPTY_FUNC = () => ({});
 
 export default class Subscription extends EventEmitter {
   static events = {

test/client/src/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import dataSubscription from "./withDataSubscription";
+import { withDataSubscription, dataSubscriptionRequest } from "./withDataSubscription";
 
 import './App.css';
 import Basic from "./components/basic";
@@ -9,8 +9,11 @@ import PickUp from "./components/pick-up";
 
 class App extends Component {
   componentDidMount() {
+    dataSubscriptionRequest("/ping", data => {
+      console.log('got data from request', data)
+    });
     setInterval(() => {
-      console.log(dataSubscription.dump());
+      console.log(withDataSubscription.dump());
     }, 1e3);  
     setTimeout(() => {
       this.setState({ value: 321 });

test/client/src/components/basic-get.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import withDataSubscription from "../withDataSubscription";
+import { withDataSubscription } from "../withDataSubscription";
 
 class Component extends React.Component {
   constructor(props) {

test/client/src/components/basic-refresh.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import withDataSubscription from "../withDataSubscription";
+import { withDataSubscription } from "../withDataSubscription";
 
 class Component extends React.Component {
   constructor(props) {

test/client/src/components/basic.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import withDataSubscription from "../withDataSubscription";
+import { withDataSubscription } from "../withDataSubscription";
 
 class Component extends React.Component {
   constructor(props) {
@@ -46,4 +46,6 @@ class Component extends React.Component {
   }
 }
 
+console.log('withDataSubscription', withDataSubscription);
+
 export default withDataSubscription(Component);

test/client/src/components/pick-up-1.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import withDataSubscription from "../withDataSubscription";
+import { withDataSubscription } from "../withDataSubscription";
 
 class Component extends React.Component {
   constructor(props) {

test/client/src/components/pick-up-2.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import withDataSubscription from "../withDataSubscription";
+import { withDataSubscription } from "../withDataSubscription";
 
 class Component extends React.Component {
   constructor(props) {

test/client/src/withDataSubscription.jsx

@@ -1,4 +1,4 @@
 import { createConfig, createDataSubscription } from "react-data-subscription";
 
 const config = createConfig();
-export default createDataSubscription(config);
+export const { withDataSubscription, dataSubscriptionRequest } = createDataSubscription(config);