JS Summit: Modular React & Redux

1. Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo | github.com/jfairbank MODULAR React& redux
2. We help brands excel. pushagency.io Your website, SimplyBuilt. simplybuilt.com
3. https://commons.wikimedia.org/wiki/File:2001_Monolith.jpg
4. https://commons.wikimedia.org/wiki/File:Close_up_of_Hand_Cut_Jigsaw_Puzzle.JPG
5. Modularity • Independent • Single Responsibility • Small • Testable • Apply to React components • Apply to Redux state and reducers
8. <Dashboard> <Panel label="Account"> <PanelItem>Name: {user.name}</PanelItem> <PanelItem>Username: {user.username}</PanelItem> <PanelItem>Email: {user.email}</PanelItem> </Panel> </Dashboard>
9. class NameTag extends React.Component { componentWillMount() { this.setState({ name: this.props.name }); } updateName(name) { this.setState({ name }); } render() { return ( <div> <p>Hello, my name is {this.state.name}</p> <p> <input type="text" value={this.state.name} onChange={e => this.updateName(e.target.value)} /> </p> </div> ); } } <NameTag name="Jeremy Fairbank"/>
10. <NameTag name="Jeremy Fairbank" onChange={myUpdateFunction}/> const NameTag = ({ name, onChange }) => ( <div> <p> Hello, my name is {name} </p> <p> <input type="text" value={name} onChange={e => onChange(e.target.value)} /> </p> </div> );
11. PROBLEMS STATE AND RESPONSIBILITY
12. const NameTag = ({ name, onChange }) => ( <div> <p> Hello, my name is {name} </p> <p> <input type="text" value={name} onChange={e => onChange(e.target.value)} /> </p> </div> ); External state
13. const NameTag = ({ name, onChange }) => ( <div> <p> Hello, my name is {name} </p> <p> <input type="text" value={name} onChange={e => onChange(e.target.value)} /> </p> </div> ); Who manages the state?
14. class NameTag extends React.Component { componentWillMount() { this.setState({ name: this.props.name }); } updateName(name) { this.setState({ name }); } render() { return ( <div> <p>Hello, my name is {this.state.name}</p> <p> <input type="text" value={this.state.name} onChange={e => this.updateName(e.target.value)} /> </p> </div> ); } }
15. class NameTag extends React.Component { componentWillMount() { this.setState({ name: this.props.name }); } updateName(name) { this.setState({ name }); } render() { return ( <div> <p>Hello, my name is {this.state.name}</p> <p> <input type="text" value={this.state.name} onChange={e => this.updateName(e.target.value)} /> </p> </div> ); } }
16. class NameTag extends React.Component { componentWillMount() { this.setState({ name: this.props.name }); } updateName(name) { this.setState({ name }); } render() { return ( <div> <p>Hello, my name is {this.state.name}</p> <p> <input type="text" value={this.state.name} onChange={e => this.updateName(e.target.value)} /> </p> </div> ); } } Many components => State strewn across app
17. class NameTag extends React.Component { componentWillMount() { this.setState({ name: this.props.name }); } updateName(name) { this.setState({ name }); } render() { return ( <div> <p>Hello, my name is {this.state.name}</p> <p> <input type="text" value={this.state.name} onChange={e => this.updateName(e.target.value)} /> </p> </div> ); } } Intermingling view and behavior => Violating SRP
18. PROBLEMS PROPS FATIGUE
19. const App = ({ name, onChangeName }) => ( <AppDashboard name={name} onChangeName={onChangeName}/> ); const AppDashboard = ({ name, onChangeName }) => ( <Dashboard> <Panel> <User name={name} onChangeName={onChangeName}/> </Panel> </Dashboard> ); const User = ({ name, onChangeName }) => ( <NameTag name={name} onChange={onChangeName}/> ); { name: 'Jeremy', onChangeName: (name) => { updateSomeGlobalState({ name }); } }
20. Wishlist • Manage state in one place outside of components in a modular fashion. • Define behavior separate from view. • Inject props without deep passing. (Like partial application.)
21. + Redux =
22. { user: { name: 'Jeremy', email: 'jeremy@example.com', username: 'elpapapollo' } } Store App
23. Provider & connect { user: { name: 'Jeremy', email: 'jeremy@example.com', username: 'elpapapollo' } } Store App
24. { name: 'Jet', type: 'UPDATE_NAME' } Action Provider & connect { user: { name: 'Jeremy', email: 'jeremy@example.com', username: 'elpapapollo' } } Store App Dispatch
25. { name: 'Jet', type: 'UPDATE_NAME' } Action Provider & connect { user: { name: 'Jet', email: 'jeremy@example.com', username: 'elpapapollo' } } New Store State App Dispatch { user: { name: 'Jeremy', email: 'jeremy@example.com', username: 'elpapapollo' } } Store Reducer
26. <Demo> <ContactManager/> </Demo> Demo
27. Recap • Modularity • Modular React components • Modular Redux reducers and state
28. Resources • facebook.github.io/react • redux.js.org • egghead.io/series/getting-started-with-redux
29. Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo | github.com/jfairbank THANKS! Code: github.com/jfairbank/modular-react-and-redux-talk