Event sourcing your React-Redux applications
Download as PPTX, PDF1 like802 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1733403303)
This document discusses event sourcing React-Redux applications. It introduces event sourcing and how events get stored in a database and used to update projections. It describes using a command service to handle actions and update events in the database. Events then get pushed to a projector service to update projections and a query service to serve data to the React frontend. It provides examples of drafting a permit event, projecting that event, connecting the Redux state to a React component, and how the permit reducers work.
Ad
More Related Content
What's hot (19)
Viewers also liked (14)
Ad
Similar to Event sourcing your React-Redux applications (20)
Ad
More from Maurice De Beijer [MVP] (20)
Recently uploaded (20)
Event sourcing your React-Redux applications
- 1. Event-Sourcing your React-Redux applications Maurice de Beijer - @mauricedb ROME 24-25 MARCH 2017
- 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]
- 9. (Semi) Structured storage Database CRUD Server HTTP Browser React
- 11. A React component to display data
- 12. Command Query Responsibility Segregation
- 14. Command Query Responsibility Segregation Database Query Service Browser React Command Service Read Update
- 16. A Redux Action Creator
- 23. The permit drafted event
- 25. Projecting a permit drafted event
- 29. The permit collection reducer
- 30. The single permit reducer
- 31. The React application startup
- 32. Connecting the state to the component
- 33. Maurice de Beijer - @mauricedb
Editor's Notes
- #4: Why? I want to create better applications Most applications store the current state http://www.flickr.com/photos/celestinechua/9661913835
- #6: Deepwater Horizon Offshore Drilling Platform on Fire https://www.flickr.com/photos/ideum/4711481781
- #7: Most applications store the current state If you are lucky there is an audit trail of sorts http://www.flickr.com/photos/ell-r-brown/4011702143
- #8: http://www.flickr.com/photos/willowbl00/12459211923
- #9: http://www.flickr.com/photos/sukiweb/10223596316
- #10: The server is often just a simple gateway with just some validation logic
- #11: There is nothing wrong with a CRUD application if the problem domain is simple http://www.flickr.com/photos/juhansonin/5144239690
- #12: A basic React component to show a list of permits
- #13: CQRS = Command Query Responsibility Segregation Use a different model to update information than the model you use to read information http://www.flickr.com/photos/usnavy/8220344431
- #14: Commands should be modeled after business actions A business user can understand command names and have a reasonable expectation of the outcome http://www.flickr.com/photos/micahdowty/4630801442
- #15: Still storing just the current state Database structure is often normalized and optimized for updating Most application read far more frequently then update
- #16: A command to update/create a draft permit
- #17: The JavaScript command to send to the server
- #18: Using Flux Standard Actions
- #19: We are still storing only the current state No trace of how we got there http://www.flickr.com/photos/danrocha/15602018982
- #20: Event Sourcing is a very old idea that has become popular again over recent years. Invented by Greg Young Events provide insight into how the system came to be in its current state The current state is a left fold of the events http://www.flickr.com/photos/dragontomato/5174914835
- #21: https://www.flickr.com/photos/eisenbahner/4051462178/
- #22: Fra Luca Bartolomeo de Pacioli (1447–1517) The Father of Accounting and Bookkeeping https://en.wikipedia.org/wiki/Luca_Pacioli
- #23: Domain Event is something that has happened in the past The result of a Command to change something Very similar to the audit trail in a database http://www.flickr.com/photos/lendingmemo/11747440176/
- #24: Invented by Greg Young No longer storing the current state but all event leading up to it The current state is a left fold of all events The projection parts are not really part of ES but CQRS and usually combined
- #25: Another service subscribes to the same events And pushes them to each connected client
- #26: Events are never erased or updated An append only model http://www.flickr.com/photos/horiavarlan/4263326117
- #27: A permit aggregate root
- #28: A domain event to describe the drafted permit
- #29: Events are projected out to the read model Observed facts = events Derived facts = projections http://www.flickr.com/photos/fotnmc/7172465908
- #30: Projecting an event to the read model
- #31: https://en.wikipedia.org/wiki/File:Mercator_projection_SW.jpg
- #32: https://en.wikipedia.org/wiki/File:Mollweide_projection_SW.jpg
- #33: Flux has a very similar and explicit way of working with data.
- #34: A Redux reducer function for a collection of permits. It calls another reducer for individual permits Very functional: Old State + Action = New State
- #35: A Redux reducer function for a single permit.
- #36: The Redux createStore() function creates the store based on the reduce functions. The React-Redux Provider connects the store state to the root App component.
- #37: The React-Redux connect functions makes data from the store available as props for the child React component.
- #38: More info: Greg Young: http://goodenoughsoftware.net/ Martin Fowler: http://martinfowler.com/eaaDev/EventSourcing.html Daniel Whittaker: http://danielwhittaker.me/tag/event-sourcing/ João Bragança: https://github.com/thefringeninja/derp.inventory Damian Hickey: http://dhickey.ie/?tag=/Event-Sourcing https://www.flickr.com/photos/stevendepolo/4582437563/