event-sourcing your react-redux applications

37
Event-Sourcing your React-Redux applications Maurice de Beijer - @mauricedb

Upload: maurice-beijer

Post on 08-Feb-2017

303 views

Category:

Technology


1 download

TRANSCRIPT

Event-Sourcing yourReact-Redux applications

Maurice de Beijer - @mauricedb

Who am I?• Maurice de Beijer• The Problem Solver• Microsoft Azure MVP• Freelance developer/instructor• Twitter: @mauricedb and @React_Tutorial• Web: http://www.TheProblemSolver.nl• E-mail: [email protected]

(Semi) Structured storage

Database CRUD Server HTTP BrowserReact

A React component to display data

Command Query Responsibility Segregation

Command Query Responsibility Segregation

Database

Query Service HTTPBrowser

React

Command ServiceHTTP

Read

Update

A command to draft a permit

The JavaScript command

A Redux Action Creator

Event Sourcing

ProjectionsDatabase

Query Service HTTP

BrowserReact

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

Event PushingProjectionsDatabase

Query Service HTTP

BrowserReact

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

Push Service

Web So

cket

React with Redux

View

Server

Store

ActionAPITriggers

HTTPUse

Notifies

Updates

Socket

The permit drafted event

Projecting a permit drafted event

The permit collection reducer

The single permit reducer

The React application startup

Connecting the state to the component

Maurice de Beijer - @mauricedb