event-sourcing your react-redux applications

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

Upload: maurice-beijer

Post on 08-Feb-2017

480 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Event-Sourcing your React-Redux applications

Event-Sourcing your React-Redux applications

Maurice de Beijer - @mauricedb

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

http://bit.ly/the-react-tutorial

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 ServiceHTTP

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
Page 21: Event-Sourcing your React-Redux applications

Event Sourcing

ProjectionsDatabase

Query Service HTTP

BrowserReact

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

Page 22: Event-Sourcing your React-Redux applications

Event PushingProjectionsDatabase

Query Service HTTP

BrowserReact

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

Push Service

Web So

cket

Page 23: Event-Sourcing your React-Redux applications

React with Redux

View

Server

Store

ActionAPITriggers

HTTPUse

Notifies

Updates

Socket

Page 24: Event-Sourcing your React-Redux applications
Page 25: Event-Sourcing your React-Redux applications
Page 26: Event-Sourcing your React-Redux applications
Page 27: Event-Sourcing your React-Redux applications

The permit collection reducer

Page 28: Event-Sourcing your React-Redux applications

The single permit reducer

Page 29: Event-Sourcing your React-Redux applications

The React application startup

Page 30: Event-Sourcing your React-Redux applications

Connecting the state to the component

Page 31: Event-Sourcing your React-Redux applications

Maurice de Beijer - @mauricedb