event-sourcing your react-redux applications at holyjs 2016
TRANSCRIPT
Event-Sourcing your React-Redux applications
Maurice de Beijer - @mauricedb
2
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]
3
4
5
6
7
8
9
10
11
(Semi) Structured storage
Database CRUD Server HTTP BrowserReact
12
13
A React component to display data
14
15
Command Query Responsibility Segregation
16
Command Query Responsibility Segregation
Database
Query Service HTTPBrowser
React
Command ServiceHTTP
Read
Update
17
The JavaScript command
18
A Redux Action Creator
19
20
21
22
23
24
Event Sourcing
ProjectionsDatabase
Query Service HTTP
BrowserReact
Command Service
HTTP
Read
UpdateEventsDatabase
Projector Service
25
Event PushingProjectionsDatabase
Query Service HTTP
BrowserReact
Command Service
HTTP
Read
UpdateEventsDatabase
Projector Service
Push Service
Web So
cket
26
React with Redux
View
Server
Store
ActionAPITriggers
HTTPUse
Notifies
Updates
Socket
27
28
29
30
31
The permit collection reducer
32
The single permit reducer
33
The React application startup
34
Connecting the state to the component
35
36Maurice de Beijer - @mauricedb