Building Angular and React Applications Together

Building Angular and React Applications Together

First we will put together a couple of simple Angular components and compile them with Ivy as an Angular library. Next we will create a React wrapper library. This library will exist as one “wrapper” React component for each Angular component in the library.

In online “framework Wars,” the mentality often is that a company can only work with one framework — never using numerous frameworks. However, this is rarely the case in real world business situations. Many, if not not most, companies are actually working with multiple javascript frameworks. Maybe they started with one framework, then acquired a company with a different framework, or they just chose the latest popular framework when starting a new project, not sticking with the original framework.

This leaves the company with a situation where they are supporting multiple frameworks, and often need the same feature or component in multiple projects. Short of burning everything to the ground and starting again with a more unified approach, could there be a smarter way of avoiding duplicate work? This article explores some of the more experimental features made available with Angular Ivy that has features which can be used to create cross framework shared component libraries.

One of the trending solutions to the cross framework problem is to use web-components. Once compiled, these web-components may be standalone elements that used within any framework. Whilst this article is not discouraging their usage, it is worth noting they do have their own drawbacks. For example, one issue I’ve encountered is how to include web-components in Angular libraries efficiently. This could pose issues when a user imports a library importing the web-components and also includes the web-components in the App. Whilst not an insurmountable challenge, it shows web-components aren’t always the best tool for the job.

Additionally, if you already have a component library written in either React or Angular, you probably don’t want to first convert these to web-components before you can use them. This leads to the question, can a React component library be used directly in Angular or vice-versa?

Can you use React components directly in Angular or Angular components in React?

Trying to figure out if it is possible to use React components within Angular, I came across an ng-packagr document and demo app that does exactly this. In this sample, a React component is rendered directly inside an Angular component using the ReactDOM.render function. This integration component could then be bundled as part of an angular library and used directly within an Angular application.

export class AngularReactLabel implements AfterViewInit {

  constructor(private hostRef: ElementRef) {}

  ngAfterViewInit(): void {
    const hostElement = this.hostRef.nativeElement;
    const LabelToShow = () => (
      // Actual use here, might include data-binding in a real world scenario
      <ReactLabel></ReactLabel>
    );
    ReactDOM.render(<LabelToShow />, hostElement);
  }
}

react-integration.component.tsx

The simplicity of this solution of just using the framework’s native render function to inject the component led me to ask if the same could be done to inject Angular components into a React application. Prior to Angular Ivy, this would have been a more complex task. However, with the introduction of the new Ivy renderer, it has become easier. It is now possible to render standalone Angular components with minimal work as demonstrated by Eliran Eliassy’s “Bye Bye NgModules” talk at NG-DE and corresponding article.

The biggest change that Ivy has introduced is that a component now knows everything it needs to render itself. Prior to this change, a component could only be rendered within an Angular context, as it required the rest of angular to be able to render it. Rendering a component in Ivy is as simple as θrenderComponent(Component).

From the Angular renderComponent function documentation, the function:

Bootstraps a Component into an existing host element and returns an instance of the component. Use this function to bootstrap a component into the DOM tree. Each invocation of this function will create a separate tree of components, injectors and change detection cycles and lifetimes.

For our challenge of rendering an Angular component within a React context, this function sounds like it does exactly what we need.

Rendering an Angular Components Library in React

Now that we know what angular tools will be useful, let us take a look at what we will need to create a demo app. First we will put together a couple of simple Angular components and compile them with Ivy as an Angular library.

Next we will create a React wrapper library. This library will exist as one “wrapper” React component for each Angular component in the library. This will enable us to make the library tree-shaekeable and filter out the components we don’t end up using. To avoid writing duplicate code, as these wrapper components will be almost identical to each other, we will create a generic wrapper component class that we can then extend into each of the wrappers.

Creating the Angular Library

The first component we will create is a simple Hello World component. This component will have an input string which it prints in the template and an output event that emits after one second. In order to tell the component when to emit the event, we will use a setTimeout in the ngOnInit lifecycle hook. Finally, we will listen to the ngOnChanges lifecycle hook, and log the change object to the console to demonstrate that everything is working as expected.

This component demonstrates a few things. First, it demonstrates that basic input and output binding will still work when we put this in a React environment. Next it will demonstrate that we can still use angular lifecycle hooks and change detection can still run as expected in default mode.

@Component({ selector: 'hybrid-hello-world', template: 'Hello {{name}}!' })
export class HelloWorldComponent implements OnInit, OnChanges {
  @Input() name = 'world';
  @Output() stuff = new EventEmitter<string>();

  ngOnInit() {
    setTimeout(() => {
      this.stuff.next('loaded');
    }, 1000);
  }
  
  ngOnChanges(changes){
    console.log(changes)
  }
}

hello-world.component.ts

The second component we will create is a Timer component which again uses Angular lifecycle hooks, but also uses rxjs observables with on-push change detection to update the counter. For on-push change detection to work, we need to tell the component when the view is dirty and needs updated. For this we will use the ivy θmarkDirty function. This function informs the Angular runtime that the component has changed and should be checked on the next change detection cycle.

import {
  Component,
  OnInit,
  OnDestroy,
  ɵmarkDirty as markDirty,
  ChangeDetectionStrategy
} from '@angular/core';
import { Subscription, timer } from 'rxjs';

@Component({
  selector: 'hybrid-timer',
  template: `counter: {{counter}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimerComponent implements OnInit, OnDestroy {

  private counterSubscription: Subscription;
  public counter: number;

  constructor() { }

  ngOnInit() {
    this.counterSubscription = timer(0, 1000)
      .subscribe(c => {
        this.counter = c;
        markDirty(this);
      });
  }

  ngOnDestroy() {
    this.counterSubscription.unsubscribe();
  }

}

timer.component.ts

Creating a React helper

Next, we will create a generic React component helper class. This class will tell React how we should render the Angular component it is given. The point of it is to reduce the amount of code required to create the more specific “wrapper” component. This generic class will use several of the new Angular Ivy functions to render our angular component to the DOM and keep it updated as events happen.

Using typescript language features, we can define this re-useable base as accepting a type T , which represents the Angular component we are to render. This way we can define a component that can render any Angular component rather than being too specific. This generic component will also extend the basic React Component, allowing all components inheriting this class to be understood by React.

The constructor function for the class will take a props object and a ComponentType object of the Angular component we wish to render. The componentType is a special type interface used by the Angular Ivy compiler which extends the bas Type and adds a special property, the key of which is the value of the NG_COMPONENT_DEF variable. This property provides additional meta data about the component we wish to render such as the selector, the inputs and the outputs.

By accessing this special property of the component, we can simplify what information the later wrapper components need to provide about the Angular component. Additionally, by using the Angular specified host element, we make the final code more verbose and easier to read as it will be included in the html.

Finally, in the constructor, we are storing the selector in the component state object with the selector key so that it is easily accessible later during rendering of the component template.

export class ReactNgWrapper<T, U = any> extends React.Component<U, { selector: string, propChanged: Set<string> }> {
  private _componentDef: ComponentDef<T>;

  constructor(props: Readonly<U>, private componentFactory: componentType<T>) {
    super(props);

   this._componentDef = componentFactory[NG_COMPONENT_DEF] || null;

    if (!this._componentDef) {
      throw new Error('A component with a ngComponentDef is required');
    }

    this.state = {
      selector: this._componentDef.selectors[0][0] as string,
      propChanged: new Set<string>()
    };
  }

react-ng-wrapper.tsx

Taking a quick look at React lifecycle hooks and their ordering we can see that the render method runs in the mounting phase before anything has been added to the DOM. This render method is required in all React components and declares the template and how it should be rendered to the DOM. Until the first render has run, there is no DOM template onto which we can hook our Angular components.

React Lifecycle Methods diagram taken from http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Therefore, we will make our render method, it will create a simple host element for our Angular element to hook onto, but we will not perform any actual Angular magic here. Our render method will grab the selector we stored earlier and create a DOM element with the element tag matching the selector defined in the Angular component. This provides a places for the angular component to insert itself into the page DOM.

render() {
    const CustomTag = `${this.state.selector}`;

    return (
      <CustomTag></CustomTag>
    )
  }

react-ng-wrapper.tsx

As there is no rendered template until after the first render has run, we will hook into the componentDidMount React lifecycle hook. This hook runs once after the initial render, at which point we will have a host element in the DOM that we can hook into. The componentDidMount React lifecycle hook can be thought of as being roughly equivalent to the ngAfterViewInit hook in Angular.

In the componentDidMount hook, we will call Angular Ivy’s θrenderComponent function. This function will take the Angular component (supplied in the constructor) and tell Angular to use lifecycle hooks. Without explicitly telling Angular to use the lifecycle hooks, they won’t work.

Handling output binding between React and Angular components is a little more challenging due the differences in how event binding is implemented. In Angular, output events are handled with event emitters, which are extensions of rxjs Subject classes. This means that in Angular when you are listening to a component output, what you are actually doing is subscribing to an observable and executing some code when that observable emits.

React takes a different approach to output events. In React, a component will pass a function as a prop input to a child component. It is then the job of the child component to call the passed in-function.

To get around this difference in approach, our React wrapper components must subscribe to the individual output event emitters of the Angular component. Within this subscription function, we can call the corresponding React prop function. As we have access to the Angular component definition, we can look at the defined outputs and loop through each one and subscribe to it if there is a corresponding React prop and setup the chain to pass on the event. Lastly, we store all these subscriptions in a private class property so that we can unsubscribe to them later to avoid memory leaks.

The final section of the componentDidMount function is to update the input binding. Here we are wrapping this into a updateComponent function as we will need to check if the inputs need updated on every change detection cycle.

The updateComponent function loops through each react prop and sets the value of the matching angular component property. Setting the property values directly rather than via the template does not inform Angular that a change has occurred. Therefore, we need to manually call ngOnChanges and Angular Ivy’s markDirty to inform Angular about what has happened.

export class ReactNgWrapper<T, U = any> extends React.Component<U, { selector: string, propChanged: Set<string> }> {
  private _childComponent: T & Partial<OnChanges>;
  private _componentDef: ComponentDef<T>;


  // After the component did mount, we set the state each second.
  componentDidMount() {
    // render component after selector is in DOM
    this._childComponent = renderComponent(this.componentFactory, { hostFeatures: [LifecycleHooksFeature] });

    // listen to outputs
    this._subscriptions.push(
      ...Object.keys(this._componentDef.outputs).map(
        (output) => {
          return this._childComponent[output].subscribe((e) => {
            if (this.props[output] && typeof this.props[output] === "function") {
              this.props[output](e)
            }
          })
        }
      )
    )

    // bind inputs
    this.updateComponent();
  }

  updateComponent() {
    if (this._childComponent) {
      const changes: SimpleChanges = {}
      // update inputs and detect changes
      Object.keys(this.props).forEach(prop => {
        if (this._childComponent[prop] &&
          Object.keys(this._componentDef.inputs).includes(prop) &&
          this._childComponent[prop] !== this.props[prop]) {

          changes[prop] = new SimpleChange(this._childComponent[prop], this.props[prop], !this.state.propChanged.has(prop))
          this.state.propChanged.add(prop);
          this._childComponent[prop] = this.props[prop]
        }
      })

      if (typeof this._childComponent.ngOnChanges === "function") {
        this._childComponent.ngOnChanges(changes);
      }

      markDirty(this._childComponent);
    }
  }
}

react-ng-wrapper.tsx

Next we will look at how we update the Angular component when the React component runs an update cycle. As we saw in the lifecycle hooks diagram above, there are 2 hooks that get called during the update cycle: render, which we are using to add the host element to the DOM and componentDidUpdate. We will use the componentDidUpdate function to update the input binding on every update cycle of the React component. As we already have a updateComponent function created to update the inputs, all the lifecycle hook needs to do is call it.

 componentDidUpdate(){
    this.updateComponent();
  }

react-ng-wrapper.tsx

Finally, we will use the componentWillUnmount hook to cleanup our subscriptions so that we don’t get any memory leaks.

 componentWillUnmount() {
    this._subscriptions.forEach(subscription => subscription.unsubscribe())
  }

react-ng-wrapper.tsx

With that we know have a generic React component that can render almost any Angular component it is given.

Creating React wrapper components for each of our Angular components

As we have created our generic react component, we can now just extend it to create our wrapper components specific to the different Angular components. Creating our Hello World and Timer components can now be done in just four lines each.

export class ReactHelloComponent extends ReactNgWrapper<HelloWorldComponent> {
  constructor(props){
    super(props, HelloWorldComponent as any)
  }
}

hello.tsx

export class ReactTimerComponent extends ReactNgWrapper<TimerComponent> {
  constructor(props) {
    super(props, TimerComponent as any)
  }
}

timer.tsx

We will then compile our React Wrapper library using the Angular compiler and ng-packagr. This is required for the final library to understand what to do with Angular.

The React Application

Finally, we will look at how we use the wrapper components within a React application and see what we have built.

import React from "react";
import { ReactTimerComponent, ReactHelloComponent } from '@hybrid/react-wrappers';
import { HelloJSX } from '@hybrid/react-component-library'
export class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "project-react",
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ name: "project-angular-react" })
    }, 2000);
  }

  onStuff(e) {
    console.log(`stuff happened ${e}`)
  }

  render() {
    return (
      <div>
        <div style={{ textAlign: "center", fontSize: "xx-large" }}>
          <ReactHelloComponent name={this.state.name} stuff={this.onStuff}></ReactHelloComponent>
          <div>
            <ReactTimerComponent></ReactTimerComponent>
          </div>

          <HelloJSX></HelloJSX>
        </div>
      </div>
    );
  }
}

app.tsx

Here we are creating a basic React component, which adds the Hello World and Timer components to the DOM. In the Hello World component we are using input binding to pass a name to the Angular component and logging an event to the console when the Angular component emits an event. Finally, we are changing the name property we pass to the Hello World component after two seconds.

Summary

With Angular Ivy, the third generation Angular compiler, it is now possible to create interesting hybrid applications and add angular components within projects of other frameworks. This opens up the possibility of creating a shared components library that can be used across frameworks without converting them to web-components or creating multiple versions of the same component in different javascript frameworks. Whilst most of this is probably not production ready, it shows what can be done with the existing tools and how powerfully they actually are.

The repository I used for the this article also includes the full working example, as well as a demo of going the other way and putting React components within Angular applications. Feel free to contribute ideas on how this could be expanded! See here for my Github Repositary.

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App. How To Code Your First Mobile App Using React Native. Learn how to build your first React Native app with important basic concepts. Learn the basics of React Native, a JavaScript Native Mobile App compiler. We look into components, events, props and passing them and more.

How To Code Your First Mobile App Using React Native

Learn how to build your first React Native app with important basic concepts

Today we start off with the basics of React Native, a javascript native mobile app compiler. We look into components, events, props and passing them and more.

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour. The quick guide to learn basic concepts and workflow of how to build React App. In this course you will learn React in 1 hour. You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more.

React is not complicated as it seems and you can learn it quickly.

In this course you will learn React in 1 hour. This is not a code along and the styling is not important. The important things are - You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more. You dont need 14 hours to learn react.

This course is 1 hour long and it will probably take you from 1 - 3 hours to finish it in a sense where you will understand what React does and how it works.

State Management with React Hooks and RxJS

State Management with React Hooks and RxJS

In this article, we’ll cover the basics of RxJS and how to integrate it with React applications using React Hooks for state management.

In this article, we’ll cover the basics of RxJS and how to integrate it with React applications using React Hooks for state management. We’ll do this by building a demo chat application. Our chat application will have three components that will communicate with each other through RxJS.

Our final app will look like this:

Let’s start by explaining RxJS

RxJS (Reactive Extensions Library for JavaScript) is a useful library for reactive programming. The RxJS documentation uses this definition:

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

Reactive programming is an event-based paradigm that allows us to run asynchronous sequences of events as soon as data is pushed to a consumer.

To be able to use RxJS for state management in React, it is important to understand the following key terms:

Observable

An Observable is a data stream that houses data that can be passed through different threads. In our demo app, we’ll be using an Observable to supply data to our different components.

Observer

An Observer consumes the data supplied by an Observable. In our demo app, we’ll be using our setState Hook to consume data from our Observable.

Subscription

In order for our Observer to consume data from our Observable, we’ll have to subscribe it to the Observable. In our demo app, we’ll be using the subscribe() method to subscribe our setState Observer to our Observable.

Setting up our application

The best way to understand RxJS is to use it.

Let’s start by creating a new react application. If you don’t have create-react-app installed, on your terminal, run:

>npm i -g create-react-app

Next:

create-react-app rxjs_react_chat

This will generate a new react application using create-react-app.

To start our application, let’s navigate to our new app directory and run the command npm start:

cd rxjs_react_chat
npm start

In our new generated app directory, let’s navigate to /src/. Since we’ll be working with multiple components, let’s set up BrowserRouter for navigating through different routes.

Let’s run the following command:

npm install --save react-router-dom

Next, we’ll edit our /src/App.js file to look like this:

// /src/App.js
import  React  from  'react';
import { BrowserRouter, Route, Switch } from  'react-router-dom';
import  './index.css';

const  App  = () => (
  <BrowserRouter />
);

export  default  App;

In our src folder, let’s create a store directory, src/store. This is where we’ll house our store.

Next, let’s create a chat.js file for our chat operations, src/store/chat.js. In our chat.js file, we’ll import Subject from rxjs and create a new variable from the Subject class:

import { Subject } from 'rxjs';

const subject = new Subject();

Subjects and Subscriptions

An RxJS Subject can act as both an Observable and an Observer at the same time. In this way, values can be multicasted to many Observers from it so that when a Subject receives any data, that data can be forwarded to every Observer subscribed to it.

In our application, we’ll be subscribing our different React Hooks setState functions to our RxJS Subject so that when it receives any data, it forwards that data to every state associated with our setState function.

Let’s create a subscribe method for this purpose:

import { Subject } from 'rxjs'

const subject = new Subject();

const chatStore = {
  subscribe: setState => subject.subscribe(setState)
}

Next, we’ll create an object for our initial chat state:

import { Subject } from 'rxjs'

const subject = new Subject();

const initialState = {
  data: [],
  newDataCount: 0,
}; 

let state = initialState;

const chatStore = {
  subscribe: setState => subject.subscribe(setState)
}

We’ll use the data key to hold our array of message objects. These message objects will contain the values person (to specify who a message is from) and text (to store the message text).

Here’s what our object will look like:

{
  person: 'first-person',
  text: 'How are you?'
}

In our initialState object, the newDataCount will be used by our notification functionality to tell when new data has been pushed to our state.

Now that we have our state object, let’s create an init() method that will initialize our component’s state whenever it’s mounted:

...
const chatStore = {
  init: () => subject.next(state),
  subscribe: setState => subject.subscribe(setState)
}

The Subject.next() method is used to feed a new value to the Subject. When we call the next() method with a value as its parameter, that value is multicasted to all Observers subscribed to the Subject.

In our application, we’ll call both the subscribe() and init() methods whenever our component mounts in order to set our state to what we have in our chat store.

Adding data to the store

Next we’ll create a sendMessage() method. We’ll call this method whenever our users hit the send message button. Our sendMessage() method will receive a message argument, which we’ll append to our state.data array. Remember that our message argument is an object with keys person and text.

Let’s create our object with the following code block:

...
const chatStore = {
  init: () => subject.next(state),
  subscribe: setState => subject.subscribe(setState),
  sendMessage: message => {
    state = {
      ...state,
      data: [...state.data, message],
      newDataCount: state.newDataCount + 1
     };
     subject.next(state);
  }
};

In our new block, we appended our message object to our state.data array, then we incremented our newDataCount.

Now that we have our newDataCount incremented every time a new message is sent by a user, we’ll also add a functionality for resetting our new data count each time the messages are viewed so that when person 1 sends a new message and person 2 reads the message, the data count resets to 0.

To do this, in our init() method, we’ll assign the newDataCount key in our state the value of 0 each time a new component that subscribes to our Subject is mounted:

...
const chatStore = {
  init: () => {
    state = {...state, newDataCount: 0},
    subject.next(state)
  },
  subscribe: setState => subject.subscribe(setState),
  sendMessage: message => {
    state = {
      ...state,
      data: [...state.data, message],
      newDataCount: state.newDataCount + 1
    };
    subject.next(state);
  }
};

Removing data from the store

Next, we’ll add a method for clearing all messages. We’ll call it clearChat():

...
const chatStore = {
  init: () => {
    <b>state = {...state, newDataCount: 0},</b>
    subject.next(state)
  },
  subscribe: setState => subject.subscribe(setState),
  sendMessage: message => {
    state = {
      ...state,
      data: [...state.data, message],
      newDataCount: state.newDataCount + 1
    };
    subject.next(state);
  },
  clearChat: () => {
    state = initialState;
    subject.next(state);
  },
  initialState
};

We’ve also added our initial state to the chatStore object. We’ll use this to set our initial state value when defining our chatState with the useState() Hook.

Finally, let’s export the chatStore object. Our src/store/chat.js file should now look like this:

// src/store/chat.js

import { Subject } from 'rxjs';

const subject = new Subject();
const initialState = {
  status: '',
  data: [],
  newDataCount: 0,
  error: ''
};

let state = initialState;

const chatStore = {
  init: () => {
    state = {...state, newDataCount: 0}
    subject.next(state)
  },
  subscribe: setState => subject.subscribe(setState),
  sendMessage: message => {
    state = {
      ...state,
      data: [...state.data, message],
      newDataCount: state.newDataCount + 1
    };
    subject.next(state);
  },
  clearChat: () => {
    state = {...state, data: []};
    subject.next(state);
  },
  initialState
};

export default chatStore;
Using the store

Now that we’ve set up our chat store, in the following steps, we’ll be creating our components to utilize the store and its methods.

First, let’s modify our src/index.css file to look like this:

.container {
  font-family: Arial, Helvetica, sans-serif;
  padding: 1em;
}

.chat-box {
  background: #202020;
  margin: auto;
  padding: 2em;
  height: 35em;
  width: 95%;
  border-radius: 20px;
  overflow-y: scroll;
}

.first-person, .second-person {
  display: inline-block;
  color: #fff;
  height: 25px;
  min-width: 20%;
  max-width: 60%;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  border-radius: 30px;
}

.first-person {
  background: rgb(0, 173, 231);
}

.second-person {
  background: #06c406;
  float: right;
}

.clear{ 
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}

.switcher-div {
  padding-top: 1em;
  text-align: center;
}

#messageForm {
  text-align: center;
  margin-top: 1.5em;
}

#messageForm input {
  height: 2em;
  width: 23em;
  border-radius: 3em;
  padding: 1em;
}

#messageForm button {
  margin-left: 2em;
  height: 2.7em;
  width: 6.2em;
  border-radius: 25px;
  border: none;
  cursor: pointer;
}

.clear-button {
  background: #d40000;
  color: #fff;
  float: right;
  margin-right: 3em;
  text-align: center;
  height: 2.5em;
  width: 8em;
  cursor: pointer;
}

.switcher {
  background: #cecece;
  color: #141414;
  height: 2.5em;
  width: 6em;
  border-radius: 25px;
  border: 1 px solid black;
  margin-right: 1em;
  cursor: pointer;
}

.notify {
  position: absolute;
  background: #db0000;
  color: white;
  height: 1em;
  width: 1em;
  border-radius: 100%;
  padding: 0.15em;
  margin-left: 0.5em;
  margin-top: -0.5em;
}

In our src folder, let’s create a components directory, src/components. This is where we’ll house all our components. We’ll need three components for our application:

  • A component for the first person
  • A component for the second person
  • A component for switching between the two person components

In our src/components directory, let’s create a new file, FirstPerson.js, for our first person component. Our new component should look like this:

import  React, { useState } from  "react";

const FirstPerson = () => {
  const [chatState, setChatState] = useState({});
  return (
    <div className="container">
      <h2>Mycroft</h2>
      <div className="chat-box">
        {chatState.data.map(message => (
          <div>
            <p className={message.person}>{message.text}</p>
            <div className="clear"></div>
          </div>
        ))}
      </div>
      <form id="messageForm">
        <input
          type="text"
          id="messageInput"
          name="messageInput"
          placeholder="type here..."
          required
        />
        <button type="submit">Send</button> <br />
      </form>
    </div>
  );
}

export  default  FirstPerson;

Subscribing to our store and retrieving existing data

In the next block, we’ll import our chatStore and use its initialState property as our default chatState value.

Then, in our useLayoutEffect() Hook, we’ll subscribe our setChatState function to our chat store using the chatStore.subscribe() method and, finally, use the chatStore.init() method to initialize our component’s chatState:

import React, { useState, useLayoutEffect } from "react";
<b>import chatStore from '../store/chat';</b>

const FirstPerson = () => {
  const [chatState, setChatState] = useState(chatStore.initialState);

  useLayoutEffect(()=> {
    chatStore.subscribe(setChatState);
    chatStore.init();
  },[]);

  return (...)

We are making use of the useLayoutEffect() Hook to send data to our chatState before our component is rendered.

To preview the result of our code so far, let’s create an index.js file in our src/components folder and export our FirstPerson component from it:

// src/components/index.js
export {  default as FirstPerson } from './FirstPerson';

Next, we’ll import our FirstPerson component in our src/App.js file and add it to a route path:

// /src/App.js
import  React  from  'react';
import { BrowserRouter, Route, Switch } from  'react-router-dom';
import { FirstPerson } from './components';
import  './index.css';

const  App  = () => (
    <BrowserRouter>
      <>
        <Switch>
          <Route path="/" component={FirstPerson} exact />
          <Route path="/first-person" component={FirstPerson} exact />
        </Switch>
      </>
   </BrowserRouter>
);

export  default  App;

Now, when we run our app and navigate to the / or /first-person route, we should see:

Back to our /src/components/FirstPerson.js file. Let’s add an onFormSubmit() method. We’ll call this method whenever our user clicks the send button:

...

const FirstPerson = () => {
  const [chatState, setChatState] = useState(chatStore.initialState);

  useLayoutEffect(()=> {
    chatStore.subscribe(setChatState);
    chatStore.init();
  },[]);

  const onFormSubmit = e => {
    e.preventDefault();
    const messageObject = {
      person: 'first-person',
      text: e.target.elements.messageInput.value.trim(),
    };
    chatStore.sendMessage(messageObject);
    document.getElementById('messageForm').reset();
  };

  return (
    ...
      <form id="messageForm" onSubmit={onFormSubmit}>
        <input
          type="text"
          id="messageInput"
          name="messageInput"
          placeholder="type here..."
          required
        />
        <button type="submit">Send</button> <br />
      </form>
    </div>
  );
}

export default FirstPerson;

Our onFormSubmit() function creates a message object with the person and text keys, then uses our chatStore.sendMessage() method to add our new message to the chat store.

Next, we’ll add a button that we’ll use to call our chatStore.clearChat() method. We’ll use this to clear our chat store whenever the clear button is clicked.

Let’s add the following block of code right after the </form> closing tag:

<button className="clear-button" onClick={() => chatStore.clearChat()}>
  Clear Chat
</button>

Our src/components/FirstPerson.js file should now look like this:

import React, { useState, useLayoutEffect } from "react";
import chatStore from '../store/chat';

const FirstPerson = () => {
  const [chatState, setChatState] = useState(chatStore.initialState);

  useLayoutEffect(()=> {
    chatStore.subscribe(setChatState);
    chatStore.init();
  },[]);

  const onFormSubmit = e => {
    e.preventDefault();
    const messageObject = {
      person: 'first-person',
      text: e.target.elements.messageInput.value.trim(),
    };
    chatStore.sendMessage(messageObject);
    document.getElementById('messageForm').reset();
  };

  return (
    <div className="container">
      <h2>Mycroft</h2>
      <div className="chat-box">
        {chatState.data.map(message => (
          <div>
            <p className={message.person}>{message.text}</p>
            <div className="clear"></div>
          </div>
        ))}
      </div>
      <form id="messageForm" onSubmit={onFormSubmit}>
        <input
          type="text"
          id="messageInput"
          name="messageInput"
          placeholder="type here..."
          required
        />
        <button type="submit">Send</button> <br />
      </form>
      <button className="clear-button" onClick={() => chatStore.clearChat()}>
        Clear Chat
      </button>
    </div>
  );
}

export default FirstPerson;

When we preview our app on our browser, we should now be able to send a message to our store and clear all messages:

[IMAGE]

Sharing data among components

Now that we’ve seen how to retrieve data from our store and add data to it, let’s create our SecondPerson component to demonstrate how this data can be shared between different components.

The SecondPerson component has the same functionality as the FirstPerson component, so we’ll only change our person value in our messageObject to second-person and the name of our user from Mycroft to Cortana in the <h2> tag inside our container div.

To do this, let’s create a new file, src/components/SecondPerson.js, and paste the following code blocks:

import React, { useState, useLayoutEffect } from "react";
import chatStore from '../store/chat';

const SecondPerson = () => {
  const [chatState, setChatState] = useState(chatStore.initialState);

  useLayoutEffect(()=> {
    chatStore.subscribe(setChatState);
    chatStore.init();
  },[]);

  const onFormSubmit = e => {
    e.preventDefault();
    const messageObject = {
      person: 'second-person',
      text: e.target.elements.messageInput.value.trim(),
    };
    chatStore.sendMessage(messageObject);
    document.getElementById('messageForm').reset();
  };

  return (
    <div className="container">
      <h2 style={{float: 'right'}}>Cortana</h2>
      <div className="chat-box">
        {chatState.data.map(message => (
          <div>
            <p className={message.person}>{message.text}</p>
            <div className="clear"></div>
          </div>
        ))}
      </div>
      <form id="messageForm" onSubmit={onFormSubmit}>
        <input
          type="text"
          id="messageInput"
          name="messageInput"
          required
        />
        <button type="submit">Send</button> <br />
      </form>
      <button className="clear-button" onClick={() => chatStore.clearChat()}>
        Clear Chat
      </button>
    </div>
  );
}

Next, we’ll need to create our PersonSwitcher component to switch between our two components. In our src/components directory, let’s create a new file, PersonSwitcher.js, and paste the following code blocks:

// src/components/PersonSwitcher.js
import React, {useState, useEffect} from 'react';
import { Link } from 'react-router-dom';
import chatStore from '../store/chat';

const PersonSwitcher = () => {
  const [chatState, setChatState] = useState(chatStore.initialState);
  const location = window.location.href.split('/')[3];

  useEffect(() => {
    chatStore.subscribe(setChatState);
    chatStore.init();
  }, [])

  const messageNotification = chatState.newDataCount > 0
    && (<span className="notify">{chatState.newDataCount}</span>);

  return (
    <div className="switcher-div">
      <Link to="/first-person"><button className="switcher">
        Person1
        {location !== 'first-person' && location.length > 1 && messageNotification}
      </button></Link>
      <Link to="/second-person"><button className="switcher">
        Person2
        {location !== 'second-person' && messageNotification}        
      </button></Link>
    </div>
  );
}

export default PersonSwitcher;

Notice that we’ve also created a chatState for our component, which we’ve subscribed to our chatStore. We’ll need this to notify our component when a new message is added to our chat store. Note how we added a messageNotification variable that utilizes our newDataCount property from our chat store.

Now, we can export our two new components from our src/components/index.js folder:

export { default as FirstPerson } from './FirstPerson';
export { default as SecondPerson } from './SecondPerson';
export { default as PersonSwitcher } from './PersonSwitcher';

Finally, let’s import our new components in our src/App.js and add them to our BrowserRouter. Our App.js file should now look like this:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { FirstPerson, SecondPerson, PersonSwitcher } from './components';
import './App.css';

const App = () => (
  <Router>
    <>
      <PersonSwitcher />
      <Switch>
        <Route path="/" component={FirstPerson} exact />>
        <Route path="/first-person" component={FirstPerson} exact />>
        <Route path="/second-person" component={SecondPerson} exact />>
      </Switch>
    </>
  </Router>
);

export default App;

Now when we run our application, we’ll be able to switch between components, receive new message count when we send a message, and clear all messages using the clear button:

Conclusion

In this article, we’ve covered the basics of RxJS and have demonstrated how to use it for state management in React by building a component-based chat application. Here’s a link to the GitHub repo for our demo app.

Compared to other alternatives like Redux, I’ve found the use of RxJS and Hooks to be a really effective and straightforward way to manage state in React applications.