Lately I’ve been trying out , , and RxJS and so far I really like the result. The basic premise was to have a single observable library and connect that to React to update components. Then push all state and business logic to the observables. This comes from spending a lot of time with Redux (with added middleware), Recompose, and Reselect, then being frustrated in the large amount of libraries and boilerplate required to simply connect components to an observable and calculate derived state. I had the pleasure years ago to work with a very smart dev (shout out to Isaiah) on an Angular 1 project that used a simple home grown observable library for state management and everything worked remarkably well without using tons of libraries. This example is meant to recreate that concept with more modern tools. It is built around a todos list that displays the list of todos fetched from a server and allows users to add new todos to the list. React Typescript This approach breaks the Redux principle of keeping all state in a single store. If you are a strong advocate of that approach, then you won’t like this, and that’s cool. I personally have had good success and find it easier to structure a project with multiple state stores that interact with each other. Disclaimer: To integrate Typescript, React, and RxJS for a simple todos list container I have created 4 files. TodosListComponent.ts This file exports the ‘dumb’ component which just render the props as JSX. * React 'react'; {TodosListComponentProps} './TodosListComponentProps'; {FormEventHandler, KeyboardEventHandler} 'react'; {TodoEntity} 'service-entities/todos'; {Key} 'ts-keycode-enum'; import as from import from import from import from import from TodosListState {todoText: ;} interface string TodosListComponent React.PureComponent<TodosListComponentProps, TodosListState> { export class extends state = {todoText: ''}; render() { {todos} = .props; const this (<div><button onClick={ .addTodo}>add</button><input type='text'value={ .state.todoText}onChange={ .updateTodoText}onKeyPress={ .handleEnter}/><ol>{todos.map((todo: TodoEntity) =><li key={todo.id}>{todo.text}</li>)}</ol></div>);} return this this this this componentDidMount() { .props.refresh();} this updateTodoText: FormEventHandler<HTMLInputElement> =e => .setState({todoText: e.currentTarget.value}); this addTodo = () => { .props.addTodo({text: .state.todoText}); .setState({todoText: ''});}; this this this handleEnter: KeyboardEventHandler<HTMLInputElement> = e => { (e.which === Key. ) { .addTodo();}}} if Enter this TodosListComponentProps.ts This file exports the interface that defines the props for the TodosListComponent, which RxJS will need to fulfill to create the TodosList container. {TodoEntity, CreateTodoEntity} 'service-entities/todos'; import from TodosListComponentProps {todos: TodoEntity[];refresh: () => ;addTodo: (todo: CreateTodoEntity) => ;} export interface void void TodosListStore.ts This is our store that will implement all the properties and methods defined by the TodosListComponentProps. To store the list of todos from the server we use a from RxJS. When storing application state a BehaviorSubject gives us two great features. We can get the current value of the observable stream using the `value` property and any changes to the stream will be multi-cast to all subscribers (like subscribing to redux). Notice we export the class not just for type information, but also so unit testing the store is easy via basic dependency injection. Also, if we need multiple TodosListStore objects we can easily create them by injecting different dependencies. BehaviorSubject {todosService} 'todos/TodosService'; {BehaviorSubject} 'rxjs/BehaviorSubject'; {CreateTodoEntity, TodoEntity} 'service-entities/todos'; import from import from import from TodosListStore { export class ( todos = BehaviorSubject<TodoEntity[]>([]), service = todosService) {} constructor readonly new private // fetch todos from the server and update the value of todos refresh = () => .service.find().then((todos: TodoEntity[]) => .todos.next(todos)); readonly this this // add the todo to the server and prepend it to our todos list addTodo = (todo: CreateTodoEntity) => .service.create(todo).then((addedTodo: TodoEntity) => .todos.next([addedTodo, ... .todos]));} readonly this this this todosListStore = TodosListStore(); export const new TodosList.ts This file exports the final container component . To connect our TodosListStore to the TodosListComponent, we need to do two things. <TodosList/> First, create an observable for all props that the component needs. We do this using a function called , which is based off the RxJS function . The combineLatest operator simply takes a list of observables and when any one of them changes it fires the subscriber with the latest values from all the observables as arguments. combineLatestObj combineLatest // combineLatest Exampleconst observer1 = Observable._of('a');_const observer2 = Observable. of(1); combineLatest(observer1,observer2,(value1, value2) => value1 + value2).subscribe(combinedValue => console.log(combinedValue)); observer1.next('b');observer2.next(2); // a1// b1// b2 Our function combineLatestObj is the same idea, but we want to give it a map of keys to observables and have it resolve the map of keys to latest values of each observable. It has an added feature of passing static values through so we don’t need to create observables for values that don’t change (like functions or constants defined outside the component). NOTE: this can be composed to create nested objects as well // combineLatestObj Exampleconst observer1 = Observable._of('a');_const observer2 = Observable. of(1);const constantValue = 'no changes'; combineLatest({value1: observer1,value2: observer2, }).subscribe(latestObject => console.log(latestObject)); constantValue observer1.next('b');observer2.next(2); // { value1: a, value2: 1, }// { value1: b, value2: 1, }// { value1: b, value2: 2, } constantValue: 'no changes' constantValue: 'no changes' constantValue: 'no changes' With combineLatestObj it is easy to create a single observable that satisfies the TodosListComponentProps with the todosListStore and is strongly typed: combineLatestObj<TodosListComponentProps>(todosListStore); Second we need to connect our new observable to the TodosListComponent to create a container, just like you would with the react-redux . To do this we have a similar higher order component called that will subscribe to the given observable and any time there is an update, the value of the observable (and nothing else) will be passed to the given component. The function is used like any other higher order component and provides strong typing to ensure the observable and component both satisfy the given interface: connect higher order component withObservable withObservable<TodosListComponentProps>(TodosListObservable)(TodosListComponent); Now exporting our container is as simple as exporting the result of these two steps: {TodosListComponent} 'todos/TodosList/TodosListComponent'; {TodosListComponentProps} 'todos/TodosList/TodosListComponentProps'; {todosListStore} 'todos/TodosList/TodosListStore'; {withObservable} 'lib/withObservable'; combineLatestObj 'lib/combineLatestObj'; import from import from import from import from import from TodosListObservable = combineLatestObj<TodosListComponentProps>(todosListStore); const TodosList = withObservable<TodosListComponentProps>(TodosListObservable)(TodosListComponent); export const I like this approach not only because I’ve used a similar pattern in the past with great results, but by using vanilla classes, observable streams and a single higher order component we’ve replaced redux, redux-thunk, reselect, and recompose. This post is based off a that demonstrates the interaction of two stores by adding the ability to filter the todo list. more involved example

React + Typescript + RxJS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Organizing React Props

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Organizing React Props

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps