Using RxJS with React.js: Part 3 — Dispatching events from Component

  • (Check out FrintJS on GitHub for more documentation on combining the power of RxJS with React)Illustration of unidirectional flow between Subject and ComponentUnidirectional cycleEarlier we saw an example of HoC streaming props to the base component.
  • Let’s now look at ways how we can dispatch events from inside the base component, update some value, and the updated value will then be streamed back to the component completing one unidirectional cycle.We can take the example of a form input field.
  • To keep things simple, let’s say BehaviorSubject is a kind of Subject, that can already start with an initial value.import { BehaviorSubject } from ‘rxjs’;const subject$ = new = console.log(x)); // prints `foo` right awayThe base Component with form inputLet’s say this is our base component:import React from ‘react’const MyComponent =…
  • First one is a stream of the input value, and the latter for handling the change.import { BehaviorSubject, Observable } from ‘rxjs’;const formInput$ = new BehaviorSubject(‘foo’); // with initial valueconst handlers$ = Observable.of({ handleChange: value = formInput$.
  • scan(function (props, emitted) { return { …props, …emitted }; });Observing the base ComponentNow that we have the props$ observable ready, we can integrate it with our base complement easily using the observe function from FrintJS:import { observe } from ‘frint-react’;const ObservedRoot = observe(function () { return props$;})(MyComponent);Now you can stream…

Earlier we saw an example of HoC streaming props to the base component. Let’s now look at ways how we can dispatch events from inside the base component, update some value, and the updated value will…
Continue reading “Using RxJS with React.js: Part 3 — Dispatching events from Component”

How I test redux-saga – codeburst

  • How I test redux-sagaI’m a fan of redux saga (although I’ve been keeping an eye on redux-observable too).
  • I particularly like having all async logic in one place, making it easily testable and having powerful async control flows available where necessary.Because the saga effects only construct a special object that is consumed and executed by the middleware (aka they dont do much!)
  • , it is really easy to test your sagas with no mocking required.Few points of note:The mock result of the api (true or false) is injected into the subsequent next() call after the api call.
  • clone()” to test different control flow branches

I particularly like having all async logic in one place, making it easily testable and having powerful async control flows available where necessary. Because the saga effects only construct a special…
Continue reading “How I test redux-saga – codeburst”

Using RxJS with React.js: Part 3 — Dispatching events from Component

Using RxJS with React.js: Part 3 - Dispatching events from Component

  • Using RxJS with React.js: Part 3 — Dispatching events from ComponentThis is the third part of the series.Illustration of unidirectional flow between Subject and ComponentUnidirectional cycleEarlier we saw an example of HoC streaming props to the base component.
  • Let’s now look at ways how we can dispatch events from inside the base component, update some value, and the updated value will then be streamed back to the component completing one unidirectional cycle.We can take the example of a form input field.
  • To keep things simple, let’s say BehaviorSubject is a kind of Subject, that can already start with an initial value.import { BehaviorSubject } from ‘rxjs’;const subject$ = new = console.log(x)); // prints `foo` right awayThe base Component with form inputLet’s say this is our base component:import React from ‘react’const MyComponent = React.createClass({ render() { const { value, handleChange } = this.props; return ( div input type=”text” value={value} onChange={e = handleChange(e.target.value)} / pCurrent value: {value}/p /div ); }});From the base component, we are accessing the props value and handleChange.
  • First one is a stream of the input value, and the latter for handling the change.import { BehaviorSubject, Observable } from ‘rxjs’;const formInput$ = new BehaviorSubject(‘foo’); // with initial valueconst handlers$ = Observable.of({ handleChange: value = formInput$.
  • scan(function (props, emitted) { return { …props, …emitted }; });Observing the base ComponentNow that we have the props$ observable ready, we can integrate it with our base complement easily using the observe function from FrintJS:import { observe } from ‘frint-react’;const ObservedRoot = observe(function () { return props$;})(MyComponent);Now you can stream the props, including both the input value and the change handler from your HoC, and also trigger changes in the Subject from your Component’s events.Live demoVisit this example in JSBin.

Earlier we saw an example of HoC streaming props to the base component. Let’s now look at ways how we can dispatch events from inside the base component, update some value, and the updated value will…
Continue reading “Using RxJS with React.js: Part 3 — Dispatching events from Component”

Building a Sort Algorithm Visualizer with React and RxJS

Build a sort algorithm visualizer with #ReactJS and #RxJS:  #JavaScript

  • Before trying out the library, I wanted to see how I would approach using RxJS with React myself.See how “easy-to-reason” RxJS code is: I was under the impression that stream libraries (and functional programming in general) are rather challenging to learn at first, but becomes intuitive once it sinks in.So the plan was to write a functioning app, then not touch it for an extended period of time, only to return to it later to refactor it.
  • I used the CustomEvent web API (aptly name-spaced as “action”) to dispatch events ,this.goToNextStep = () = { const action = { origin: ‘USER’, request: ‘GO_TO_NEXT_STEP’ } document.dispatchEvent(new CustomEvent(‘action’, {detail: action}))}and create an observable of “action” events, in a React Component StreamProvider /, with a subscription that will trigger state updates that gets passed down to the child component SortVisualizer /.
  • Can my code, relying only on good naming practices and organization, be easy to read?It’s hard to say anything about the high-level organization of the application code, because even after 4+ months of inactivity, it was easy to recall the whats and whys of my design decisions after a few minutes of digging in.However, it was really cool to experience how easy it was to follow the parts written in RxJS.Implementing “Undo” is Easy with RxJSCreating the “go back one step” button was a breeze using RxJS.
  • First, I tracked the current state of sort progress as a prop inSortVisualizer / as the following:const currentSortState = { bars: [{bar}, …] // data that we’re sorting nextStep: {targetIndex: 0, type: ‘COMPARE’} // describes what the next sorting step is}This prop is coming from the observable in StreamVisualizer / .
  • acc : acc.slice(0, acc.length -1) // just remove latest step } else { // other stuff } })Handling Async Declaratively with RxJSAnother aspect that I was focusing on was how easy it is to handle async operations with RxJS.

About 4 months ago, I set out to do a little experiment. The plan was to build a sort algorithm visualizer, but the main point wasn’t about algorithms themselves. My goal was to: So the plan was to…
Continue reading “Building a Sort Algorithm Visualizer with React and RxJS”

Action Streams and Redux – Markus Coetzee – Medium

Action Streams and Redux @MarkusCtz  #Redux #Reactjs #JavaScript

  • With the code the question of ‘How does this list of items behave’ becomes easy to answer, because it has been explicitly declared and we no longer have to search the code to build up our mental model.
  • The code seems fine, but we did introduce state management to the function, which has resulted in some control flow.
  • With the code each operation is also responsible for reloading the list – i.e., we’re mixing concerns, which I don’t think is inherently wrong, but in this case it can easily result in spaghetti code if the screen’s complexity increases.
  • If we need to imperatively integrate with the data flow of an older module, you would likely need to manually subscribe to it and dispatch a new Redux action when it triggers.
  • When we have successfully performed an operation on a list item, we want to reload the list.

A couple of months ago I experimented with using RxJS for unidirectional data flow. The focus was on showcasing how action streams could be used to form state streams via plain old reducer functions…
Continue reading “Action Streams and Redux – Markus Coetzee – Medium”

State Streams and React — Medium

  • Each connected component is forced to shallow compare in the shouldComponentUpdate lifecycle method because it doesn’t know if it just received a state update which is relevant or not.
  • The above gives us two action streams that we can use to reduce state with.
  • A state stream is effectively the result of reducing a stream of actions.
  • As mentioned before, the two core building blocks of a module’s state stream is its action stream and its reducer (of said action stream).
  • Accessing State in Action Streams

Read the full article, click here.


@MarkusCtz: “Why RxJS is the Better Tool for Unidirectional Data Flow: @christianalfoni @BenLesh @dan_abramov #reactjs #redux #rx”


Why RxJS is the Better Tool for Unidirectional Data Flow


State Streams and React — Medium