Be more functional and reactive in React

Components with an unidirectional data flow have become the most popular way to build UIs. With such architecture, there is still one outstanding question: what do we do with side-effects and how can we handle time? And they are everywhere: logging, error reporting, network requests, websockets, analytics, storage persistence, etc. In this talk, we will explore how observability is key to side-effects, and how reactive programming can unleash a slew of possibilities. I'll demonstrate how a new library called Refract can help you be more Functional and Reactive in React.

Transcript

1. Is Reactive programming the next hot topic?
3. Hello everyone Thomas Roch github.com/troch @tcroch
4. What is reactive programming ?
5. username$.pipe( filter(name name name.length > 3), debounceTime(300), switchMap(name ajax({ url: `/users/search/${name}` }) ) )
6. Where does username$ comes from? What do I do with the output?
7. Let's see a few examples
8. redux-observable action$.pipe( ofType("USERNAME"), filter(({ payload }) payload payload.length > 3), debounceTime(300), switchMap(name ajax({ url: `/users/search/${name}` })), map(users ({ type: "USERS", payload: users })) )
9. Cycle.js sources.DOM.select(".field") .events("input") .pipe( map(event event.target.value), filter(name name name.length > 3), debounceTime(300), switchMap(name ajax({ url: `/users/search/${name}` }) ), map(users ul(users.map(user li(user)))) )
10. Gulp gulp.src("src .*") .pipe( rename({ suffix: "_copy" }) ) .pipe(gulp.dest("/dist"))
11. Reactive "chain" Source: events Pushing data Destination: an imperative API
12. Reactive programming ⚡ Event-driven Chaining observables (streams) Declarative and not imperative The nal consumer handles imperative code
13. React components Props-driven Declarative Elements returned are set to the DOM (imperative)
14. props virtualElements
15. props$ virtualElements$
16. const MyComponent = props <div>Hello {props.name}</div> props$ .pipe(map(Mycomponent)) .subscribe({ next: virtualElements { renderer.render(virtualElements) } })
17. ⚛ Is React Reactive?
18. Can we use React with Reactive programming? ⚛ + ⚡
19. We have a hurdle and an ally ⚠ setState
20. setState User-facing imperative API Used to re-render effectively Used to load data from state containers (Redux, Mobx, etc.)
21. Redux is reactive ⚡ It's event-driven (actions) Store is an observable In React apps, setState is the imperative destination
22. actions$ state$
23. actions$ .pipe(fold(reducer)) .subscribe({ next: state { this.setState(mapStateToProps) } })
24. actions$ .pipe(fold(reducer)) .subscribe({ next: state { this.setState(mapStateToProps) } }) props$ .pipe(map(Mycomponent)) .subscribe({ next: virtualElements { renderer.render(virtualElements) } })
25. actions$ .pipe( fold(reducer), map(mapStateToProps), map(MyComponent) ) .subscribe({ next: virtualElements { renderer.render(virtualElements) } })
26. Meet Refract! github.com/fanduel-oss/refract
27. Refract provides you with all you need Sources and destinations Supports RxJS, xstream, Most and Callbag
28. What can you observe? Props Events Components mounting and unmounting Redux state and actions Bring your own observables (MobX, custom services, etc.)
29. What can you push? Props Elements Data to your custom effect handler
30. Demo time Typeahead https://codesandbox.io/s/2x504wzjw0
31. You can use it to Handle side-effects Manipulate, replace and inject props Handle state Render components
32. With a single HoC, you can replace recompose higher-order components connect from react-redux and many more HoCs
33. Conclusion Events are the source of truth of your app Enjoy the power of reactive programming Think data transformation, not view / state separation Decentralise your app logic, for better scalability
34. Thanks https://github.com/fanduel-oss/refract ⚛ #refract on Reacti ux @tcroch on twitter AMA at 17:00