event-sourcing your react-redux applications at holyjs 2016

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: maurice.de.beijer@gmail.com

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