Event sourcing your React-Flux applications

React applications & Event Sourcing

Mauricede Beijer

Software EngineerTrainer

ABL – The Problem Solver

Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedb and @React_TutorialWeb:http://www.TheProblemSolver.nlE-mail: maurice.de.beijer@gmail.com

(Semi) Structured storage

Database CRUD Server HTTP Browser

A React component to display data

Command Query Responsibility Segregation

Command Query Responsibility Segregation

Database

Query ServiceHTTP

Browser

Command Service

HTTP

Read

Update

A command to draft a permit

The JavaScript command

A Redux Action Creator

Event Sourcing

ProjectionsDatabase

Query Service HTTP

Browser

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

React with Redux

ViewServer

Store

Action

API

Triggers

HTTP

Use

Notifies

Updates

The permit drafted event

Projecting a permit drafted event

The permit collection reducer

The single permit reducer

The React application startup

Connecting state to a component

@mauricedb

Question?

http://theproblemsolver.nl

Maurice.de.beijer@gmail.com

MauriceDe Beijer

Software EngineerTrainer

ABL – The Problem Solver