Download to read offline
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1756998088)
Uploaded byMaurice De Beijer [MVP]
Event-Sourcing your React-Redux applications
The document discusses event sourcing, which is an approach to storing data in a database by recording the full history of events that caused the data to change state. It describes how event sourcing can be used with React and Redux applications by having command services generate events from user actions, storing those events in a database, and using projection services to transform the events into data views. Projection services update the Redux store, which then updates the React components to display the new state to the user.
TechnologyâŚ
More Related Content
Similar to Event-Sourcing your React-Redux applications
More from Maurice De Beijer [MVP]
![[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-themodernstackbuildingwebaiapplicationswithserverless-251124030844-388cf04f-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
Event-Sourcing your React-Redux applications
- 1.
- 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
- 9. (Semi) Structured storage DatabaseCRUD Server HTTP Browser React
- 11. A React componentto display data
- 12. Command Query ResponsibilitySegregation
- 14. Command Query ResponsibilitySegregation Database Query Service Browser React Command Service Read Update
- 15.
- 16. A Redux ActionCreator
- 21.
- 22.
- 24. The permit draftedevent
- 26. Projecting a permitdrafted event
- 29.
- 30. The permit collectionreducer
- 31. The single permitreducer
- 32. The React applicationstartup
- 33. Connecting the stateto the component
- 34. 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/