Recompose to simplicity and beyond

A presentation about the basics of HoC, Presentational Layers, Container Components, but mostly recompose and how to structure projects in a more functional way.

Transcript

1. RECOMPOSE To Simplicity And Beyond 22.June 2017 – React JS Meetup Vienna Timo Obereder Android Native-/React Web- Developer @defuex
3. Higher Order Components
5. (Component) => EnhancedComponent
6. (arg1, arg2, Component) => EnhancedComponent
7. (arg1, arg2) => (Component) => EnhancedComponent
8. Curry (so delicious) & Partial Application
9. Application: The process of applying a function to its arguments in order to produce a return value. Partial Application: The process of applying a function to some of its arguments. It takes a function with multiple parameters and returns a function with fewer parameters. Add(x,y) = x + y Add2 = Partial(Add, 7)
10. Curry: A function that takes a function with multiple parameters as input and returns a function with exactly one parameter. f(x,y,z) curried to f:x => (y => (z => n)))
11. var isGreaterThan = function(limit) { return function(value) { return value > limit; }; };
12. var isGreaterThan = (limit) => (value) => value > limit;
13. react-redux (arg1, arg2) => (Component) => EnhancedComponent const EnhancedComponent = connect( mapStateToProps, mapDispatchToProps, )(Component);
14. (Component, arg1) => EnhancedComponent relay export default Relay.createContainer(Todo, { fragments: { todo: () => Relay.QL` fragment on Todo { complete, id, text }` } });
15. Function composition Container Presentational Component &
16. Combine simple functions, in return, build more complicated once
17. Yes
18. Indeed
19. But
21. Presentational Component & Container
22. const Commit = ({ sha, message }) => ( <div> <p>{sha}</p> <p>{message}</p> </div> )
23. class CommitContainer extends React.Component { state = { commit: null }; componentDidMount() { fetch(`/commits/${this.props.id}`) .then(commit => this.setState({ commit })); } render() { const { commit } = this.state; return <Commit {...this.props} {...commit} />; } }
24. const fetchCommit = (WrappedComponent) => ( class extends React.Component { state = { commit: null }; componentDidMount() { fetch(`/commits/${this.props.id}`) .then(commit => this.setState({ commit })); } render() { const { commit } = this.state; return <WrappedComponent {...this.props} {...commit} />; } } ) const CommitContainer = fetchCommit(Commit);
25. const fetchResource = (path) => (WrappedComponent) => ( class extends React.Component { state = { resource: null }; componentDidMount() { path(this.props) .then(resource => this.setState({ resource })); } render() { const { resource } = this.state; return <WrappedComponent {...this.props} {...resource} />; } } ) const fetchPost = fetchResource(props => fetch(`/commits/${props.id}`)); const CommitContainer = fetchPost(Commit);
26. const fetchGithubOwner = fetchResource(props => fetch(`/owners/${props.id}`) ); const OwnerContainer = fetchGithubOwner(Owner);
27. Props Proxy
28. Props Proxy const withUser = (WrappedComponent) => { return class extends React.Component { render() { const user = { id: ’1337', name: Pacman' }; return ( <WrappedComponent {...this.props} user={user} /> ); } } } <Props manipulation>
29. Inheritance Inversion
30. function iiHOC(WrappedComponent) { return class Enhancer extends WrappedComponent { render() { return super.render() } } } Inheritance Inversion
31. Inheritance Inversion <Render hijacking> function authLocked(WrappedComponent) { return class Enhancer extends WrappedComponent { render() { if (this.props.loggedIn) { return super.render() } else { return null } } } }
32. Inheritance Inversion <State manipulation> export function debug(WrappedComponent) { return class Enhancer extends WrappedComponent { render() { return ( <div> <h2>Debugger Component</h2> <p>Props</p> <pre>{JSON.stringify(this.props, null, 2)}</pre> <p>State</p><pre>{JSON.stringify(this.state, null, 2)}</pre> {super.render()} </div> ) } } }
34. Compose
35. const BaseComponent = (props) => {...} let EnhancedComponent = firstHoc(BaseComponent); EnhancedComponent = secondHoc(/*...args*/)(EnhancedComponent); EnhancedComponent = thirdHoc(/*...args*/)(EnhancedComponent);
36. const enhance = compose( thirdHoc(/*...args*/), secondHoc(/*...args*/), firstHoc ) const EnhancedComponent = enhance(BaseComponent)
37. function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } const last = funcs[funcs.length - 1] return (...args) => { let result = last(...args) for (let i = funcs.length - 2; i >= 0; i--) { const f = funcs[i] result = f(result) } return result } }
38. RECOMPOSE presents
39. „recompose is a react utility belt for function components and higher-order components“ – Andrew Clark
40. Wrapper Functions
41. withState withHandlers shouldUpdate withPropsOnChange lifecycle and many more…
42. const withCounterState = withState('counter', 'setCounter', 0) const Counter = ({ counter, setCounter, }) => ( <div> Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button> <button onClick={() => setCounter(n => n - 1)}>Decrement</button> </div> ) export default compose( withCounterState, )(Counter); withState
43. withHandlers const withCounterHandler = withHandlers({ handleCounterUp : ({ counter, setCounter, }) => () => { setCounter(counter + 1); }, handleCounterDown : ({ counter, setCounter, }) => () => { setCounter(counter - 1); }, });
44. withState & withHandlers const Counter = ({ counter, handleCounterUp, handleCounterDown, }) => ( <div> Count: {counter} <button onClick={handleCounterUp}>Increment</button> <button onClick={handleCounterDown}>Decrement</button> </div> ) export default compose( withCounterState, withCounterHandler, )(Counter);
45. shouldUpdate const withCommitsAmountChanged = shouldUpdate( (props, nextProps) => { if( (props.commitsMax !== nextProps.commitsMax) || (props.someOtherProp !== nextProps.someOtherProp) ){ return true; } return false; });
46. BOOOOOAH! BOOOOOAH! PUUUAAAH! PWOOAH!!!
47. Pros Decouple functional -and presentational layers Faster development Improves refactoring more readability
48. Cons Expensive to change if abstraction is wrong Could be complex for newcomers(pretty functional) „More complex computation"
49. Code Demo http://github.com/DeFuex/react-recompose-example/ Project Setup: http://defuex.github.io/Blogolio/reactTutPart1
50. Thanks! Questions? @defuex e-mail: timo.obereder@gmail.com TimoObereder