Managing State in React Apps with RxJS by James Wright at FrontCon 2019

Managing State in React
Applications with RxJS
James Wright
Software Developer, YLD

I’m a developer who works with various
technologies and languages, but primarily
JavaScript and C#

JavaScript and C#
I have gained experience at the likes of Sky,
Channel 4, Trainline, News UK, and NET-A-
PORTER

JavaScript and C#
I have gained experience at the likes of Sky,
Channel 4, Trainline, News UK, and NET-A-
PORTER
I love open-source software, writing, speaking,
and mentoring

I work at YLD
We’re a software engineering
and design consultancy

I work at YLD
We’re a software engineering
and design consultancy
We specialise in JavaScript,
TypeScript, Node.js, React,
DevOps, and beyond!

Time for some background
Image: https://www.pexels.com/photo/background-blur-clean-clear-531880/

Recently, I have been contributing to a
web app.

On the client, it uses:
● React for rendering the DOM

● Redux for state management

● RxJS for reactive data transformation
and aggregation

● RxJS for reactive data transformation
and aggregation
● Redux Observable for expressing
async Redux actions with RxJS

That sounds like a lot to juggle! How
does that even look?!

I’ll show you, but let’s firstly take a step
back.

“RxJS is a library for [functional], reactive
programming using Observables, to
make it easier to compose
asynchronous or callback-based code.” -
the RxJS team

Right. How does that translate to code?

import { webSocket } from 'rxjs/webSocket';
import { map, scan } from 'rxjs/operators';
interface StreamedMessage {
username: string;
message: string;
}
webSocket<StreamedMessage>('wss://localhost:8080/rt')
.pipe(
map(({ message }) => message),
scan<string>((messages, incomingMessage) => [
...messages,
...incomingMessage,
], []),
)
.subscribe(renderMessages);

import { webSocket } from 'rxjs/webSocket';
interface StreamedMessage {
username: string;
message: string;
}
webSocket<StreamedMessage>('wss://localhost:8080/rt')
.pipe(
...messages,
...incomingMessage,
], []),
)
.subscribe(renderMessages);
Courtesy of rxviz.com

import { fromEvent, concat } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { switchMap, map } from 'rxjs/operators';
const submitButton = document.querySelector<HTMLButtonElement>('.button');
const loadStory = fromEvent<HTMLButtonElement>(submitButton, 'click');
loadStory.pipe(
switchMap(({ dataset: { id } }) =>
concat(
ajax(`/api/story/${id}`),
ajax(`/api/story/${id}/comments`),
),
),
map(({ response }) => response),
).subscribe(response =>
renderComponentFromData(response),
);

So I can generate, consume, and map
streams of data, without side effects,
using composable operators?

You can also write your own
observables!

import { Observable } from 'rxjs';
const createMessageSource = () =>
new Observable(observer => {
const socket = new WebSocket('wss://localhost:8081/messages'); // Producer
socket.onmessage = message => observer.next(message);
socket.onclose = () => observer.complete();
socket.onerror = e => observer.error(e);
// clean-up code ran when one unsubscribes from observable
observer.add(() => {
socket.onmessage = null;
socket.onclose = null;
socket.onerror = null;
socket.close();
});
});

const socket = new WebSocket('wss://localhost:8081/messages'); // Producer
socket.onmessage = message => observer.next(message);
socket.onclose = () => observer.complete();
socket.onerror = e => observer.error(e);
// clean-up code ran when one unsubscribes from observable
socket.onmessage = null;
socket.onclose = null;
socket.onerror = null;
socket.close();
});
});
(This is a cold observable)

const socket = new WebSocket('wss://localhost:8081/messages');
const onMessage = (message: MessageEvent) => observer.next(message);
const onClose = () => observer.complete();
const onError = (e: Event) => observer.error(e);
socket.addEventListener('message', onMessage);
socket.addEventListener('close', onClose);
socket.addEventListener('message', onError);
socket.removeEventListener('message', onMessage);
socket.removeEventListener('close', onClose);
socket.removeEventListener('error', onError);
});
});

const socket = new WebSocket('wss://localhost:8081/messages');
const onMessage = (message: MessageEvent) => observer.next(message);
const onClose = () => observer.complete();
const onError = (e: Event) => observer.error(e);
socket.addEventListener('message', onMessage);
socket.addEventListener('close', onClose);
socket.addEventListener('message', onError);
socket.removeEventListener('message', onMessage);
socket.removeEventListener('close', onClose);
socket.removeEventListener('error', onError);
});
});
(This is a hot observable)

Great, but what if I need to push data to
subscribers from elsewhere?

RxJS has subjects!
(It’s an observable + observer, all in one
lovely API surface)

import { Subject } from 'rxjs';
const messageSource = new Subject<StreamedMessage>();
messageSource.pipe(
...messages,
incomingMessage,
], []),
).subscribe(renderMessages);
messageSource.next({ username: 'Bob', message: 'Hi!' });
messageSource.next({ username: 'Peter', message: 'Hey!' });

How can I consume observables in my
React app?

import { Action } from 'redux';
interface State {
messages: string[];
isLoading: boolean;
hasError: boolean;
}
interface MessageAction extends Action {
messages: string[];
}

import { Observable, of, concat } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { filter, catchError, switchMap } from 'rxjs/operators';
const fetchMessagesEpic = (
actionSource: Observable<Action>,
) =>
actionSource.pipe(
filter(action => action.type === 'FETCH_MESSAGES'),
switchMap(() => concat(
of({ type: 'REQUEST_MESSAGES' }),
ajax('/api/messages').pipe(
switchMap(({ response }) => response),
switchMap(messages => of({
type: 'RECEIVE_MESSAGES',
messages,
})),
),
)),
catchError(() => of({ type: 'FETCH_ERROR' })),
);

import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
const epicMiddleware = createEpicMiddleware();
const store = createStore(
reducer,
applyMiddleware(epicMiddleware),
);
epicMiddleware.run(fetchMessagesEpic);
store.dispatch({ type: 'FETCH_MESSAGES' });

Great, so I can use RxJS to control my
Redux state, which I can render with
React!

...I have to use it alongside Redux and
Redux Observable.

What if I could just use RxJS for
everything?

Well, I tried just that. Let me show you.

Disclaimer: it’s a proof-of-concept.

import * as React from 'react';
import MessageList from './MessageList';
import MessageForm from './MessageForm';
import Status from './Status';
export default () => (
<>
<Status />
<MessageForm />
<MessageList />
</>
);

import { appState, defaultState, State } from '../state';
import connectToObservable from './connectToObservable';
export const MessageList = ({ messages }: Pick<State, 'messages'>) => (
<ul>
{messages.map((message, i) => <li key={i}>{message}</li>)}
</ul>
);
export default connectToObservable(appState, defaultState)(MessageList);

export interface State {
messages: string[];
isFormValid: boolean;
isLoadingQuote: boolean;
hasQuoteError: boolean;
}
export const defaultState: State = {
messages: [],
isFormValid: true,
isLoadingQuote: false,
hasQuoteError: false,
};
export const appState = new BehaviorSubject<State>(defaultState);

Reading state is cool, but how can we
update it?

const [message, setMessage] = useState('');
return (
<section>
<h2>Add a Message</h2>
<form
name="message-form"
onSubmit={e => {
e.preventDefault();
toNextState(addMessage(message));
}}
>
<input
className="form-input"
type="text"
name="message"
placeholder="Your comment"
onChange={e => setMessage(e.currentTarget.value)}

export type Action<TPayload> = (payload?: TPayload) => Reducer;
export type Reducer = (currentState: State) => Observable<State>;
export const withState = (reducer: Reducer) =>
appState
.pipe(
take(1),
switchMap(state => reducer(state)),
);
export const toNextState = (reducer: Reducer) => {
const sequence = withState(reducer);
sequence.subscribe(newState => appState.next(newState));
return sequence;
};

import { of } from 'rxjs';
import { State, withState } from './state';
export const addMessage = (message: string) =>
(currentState: State) =>
of({
...currentState,
isFormValid: !!message.length,
isLoadingQuote: false,
hasQuoteError: false,
messages: [
...(message.length ? [message] : []),
...currentState.messages,
],
});

Why do reducers have to return
observables?

So we can express asynchronous
effects!

placeholder="Your comment"
onChange={e => setMessage(e.currentTarget.value)}
/>
<input
className="form-input form-button"
type="submit"
value="Add"
/>
<button
className="form-input form-button"
type="button"
name="add-quote"
disabled={isLoadingQuote}
onClick={() => toNextState(addRonSwansonQuote())}
>
Add Ron Swanson quote
</button>
</form>

export const addRonSwansonQuote = () =>
() =>
concat(
withState(onQuoteLoading()),
ajax.getJSON<string[]>('https://ron-swanson-quotes.herokuapp.com/v2/quotes')
.pipe(
switchMap(([quote]) => withState(addMessage(quote))),
catchError(() => withState(onQuoteError())),
),
);

So we can use the same paradigms to:

● create and query data sources

● combine said sources

● reduce actions into a single source of
truth

● reduce actions into a single source of
truth
● consume this source of truth in React

But how does this perform compared to
Redux?

But how does this perform compared to
Redux? useReducer?

So we’re potentially hampering
performance.

Someone: “But I like the approach. How
do I go about ditching Redux?”

Well, you probably shouldn’t.

RxJS can be overkill for simpler
applications.

Plus Redux provides a solid, opinionated
architecture.

Someone else: “Isn’t MobX built around
observables? Why not just use that?”

It is, and it’s great, but its observables
are not compatible with RxJS.

Summary
● RxJS provides a functional, declarative means
of consuming and aggregating data sources

Summary
● Redux Observable is nice, but we can cut out
the middle man using HOCs and Hooks

Summary
● However, Redux provides a (positively)
opinionated architecture

Summary
● However, Redux provides a (positively)
opinionated architecture
● How does this perform compared to Redux?

Thanks For Listening!
@jamesseanwright
@YLDio
jamesseanwright
jamesswright.co.uk
yld.io
Icons by Alfredo Hernandez (https://www.iconfinder.com/AlfredoHernandez)
Slides: https://bit.ly/reactrxslides
Repo: https://bit.ly/reactrxrepo

Managing State in React Apps with RxJS by James Wright at FrontCon 2019

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Managing State in React Apps with RxJS by James Wright at FrontCon 2019

Ähnlich wie Managing State in React Apps with RxJS by James Wright at FrontCon 2019 (20)

Mehr von DevClub_lv

Mehr von DevClub_lv (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Managing State in React Apps with RxJS by James Wright at FrontCon 2019

Hinweis der Redaktion