event sourcing your react-redux applications

33
Event-Sourcing your React-Redux applications Maurice de Beijer - @mauricedb ROME 24-25 MARCH 2017

Upload: maurice-beijer

Post on 05-Apr-2017

158 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Event sourcing your React-Redux applications

Event-Sourcing yourReact-Redux applicationsMaurice de Beijer - @mauricedb

ROME 24-25 MARCH 2017

Page 2: Event sourcing your React-Redux applications

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]

Page 3: Event sourcing your React-Redux applications
Page 4: Event sourcing your React-Redux applications
Page 5: Event sourcing your React-Redux applications
Page 6: Event sourcing your React-Redux applications
Page 7: Event sourcing your React-Redux applications
Page 8: Event sourcing your React-Redux applications
Page 9: Event sourcing your React-Redux applications

(Semi) Structured storage

Database CRUD Server HTTP BrowserReact

Page 10: Event sourcing your React-Redux applications
Page 11: Event sourcing your React-Redux applications

A React component to display data

Page 12: Event sourcing your React-Redux applications

Command Query Responsibility Segregation

Page 13: Event sourcing your React-Redux applications
Page 14: Event sourcing your React-Redux applications

Command Query Responsibility Segregation

Database

Query Service HTTPBrowser

React

Command Service

HTTP

Read

Update

Page 15: Event sourcing your React-Redux applications

The JavaScript command

Page 16: Event sourcing your React-Redux applications

A Redux Action Creator

Page 17: Event sourcing your React-Redux applications
Page 18: Event sourcing your React-Redux applications
Page 19: Event sourcing your React-Redux applications
Page 20: Event sourcing your React-Redux applications

Event Sourcing

Projections

Database

Query Service HTTP

BrowserReact

Command Service

HTTP

Read

Update

EventsDatabase

Projector Service

Page 21: Event sourcing your React-Redux applications

Event Pushing

ProjectionsDatabase

Query Service HTTP

BrowserReact

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

Push Service

Web So

cket

Page 22: Event sourcing your React-Redux applications
Page 23: Event sourcing your React-Redux applications

The permit drafted event

Page 24: Event sourcing your React-Redux applications
Page 25: Event sourcing your React-Redux applications

Projecting a permit drafted event

Page 26: Event sourcing your React-Redux applications
Page 27: Event sourcing your React-Redux applications
Page 28: Event sourcing your React-Redux applications

React with Redux

View

Server

Store

ActionAPITriggers

HTTPUse

Notifies

Updates

Socket

Page 29: Event sourcing your React-Redux applications

The permit collection reducer

Page 30: Event sourcing your React-Redux applications

The single permit reducer

Page 31: Event sourcing your React-Redux applications

The React application startup

Page 32: Event sourcing your React-Redux applications

Connecting the state to the component

Page 33: Event sourcing your React-Redux applications

Maurice de Beijer - @mauricedb