{"id":7011,"date":"2019-05-10T21:25:51","date_gmt":"2019-05-10T21:25:51","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7011"},"modified":"2019-05-11T21:55:06","modified_gmt":"2019-05-11T21:55:06","slug":"reactive-extensions-rx-in-javascript-rxjs","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/reactive-extensions-rx-in-javascript-rxjs\/","title":{"rendered":"Reactive Extensions (Rx) in JavaScript (rxjs)"},"content":{"rendered":"

Reactive Extensions are everywhere – I wanted to try the JavaScript version of the library, so below is a sample React component demonstrating a “fake” service call that might occur within the fetch<\/em> function. The setTimeout is used simply to simulate some latency in the call.<\/p>\n

To add rxjs simple use<\/p>\n

\r\nyarn add rxjs\r\n<\/pre>\n
Now here’s the sample component code…<\/p>\n
\r\nimport {Observable, Subscriber, Subscription} from 'rxjs';\r\n\r\ninterface ServiceState {\r\n  data: string;\r\n}\r\n\r\nclass ServiceComponent extends Component<{}, ServiceState> {\r\n\r\n  _subscription!: Subscription;\r\n\r\n  constructor(prop: any) {\r\n    super(prop);\r\n    this.state = {\r\n      data : "Busy"\r\n    };\r\n  }\r\n\r\n  fetch() : Observable<string> {\r\n    return Observable.create((o: Observer<string>) => {\r\n      setTimeout(() => {\r\n        o.next('Some data');\r\n        o.complete();\r\n      }, 3000);\r\n    });\r\n  }\r\n\r\n  componentDidMount() {\r\n    this._subscription = this.fetch().subscribe(s => {\r\n      this.setState({data: s})\r\n    });\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    if(this._subscription) {\r\n      this._subscription.unsubscribe();\r\n    }\r\n  }  \r\n\r\n  render() {\r\n    return (\r\n      <div>{this.state.data}<\/div>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
In this example we have the fetch<\/em> function returns an instance of an Observable of type string. We then subscribe to this within the componentDidMount<\/em> function, which is called when the component is inserted into the DOM and then we subscribe to the Observable, updates will be applied to the component’s state. <\/p>\n
The componentWillUnmount<\/em> is called when the component is removed from the DOM and hence we unsubscribe from the Observable. <\/p>\n","protected":false},"excerpt":{"rendered":"
Reactive Extensions are everywhere – I wanted to try the JavaScript version of the library, so below is a sample React component demonstrating a “fake” service call that might occur within the fetch function. The setTimeout is used simply to simulate some latency in the call. To add rxjs simple use yarn add rxjs Now […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45],"tags":[],"class_list":["post-7011","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7011"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7011\/revisions"}],"predecessor-version":[{"id":7047,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7011\/revisions\/7047"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}