JS Summit: Modular React & Redux

Transcript

1. Jeremy Fairbank
   blog.jeremyfairbank.com
   @elpapapollo | github.com/jfairbank
   MODULAR
   React& redux
   

   View Slide

2. We help brands excel.
   pushagency.io
   Your website, SimplyBuilt.
   simplybuilt.com
   

   View Slide

3. https://commons.wikimedia.org/wiki/File:2001_Monolith.jpg
   

   View Slide

4. https://commons.wikimedia.org/wiki/File:Close_up_of_Hand_Cut_Jigsaw_Puzzle.JPG
   

   View Slide

5. Modularity
   • Independent
   • Single Responsibility
   • Small
   • Testable
   • Apply to React components
   • Apply to Redux state and
   reducers
   

   View Slide

6. View Slide

7. View Slide

8. 
   
   Name: {user.name}
   Username: {user.username}
   Email: {user.email}
   
   
   

   View Slide

9. class NameTag extends React.Component {
   componentWillMount() {
   this.setState({ name: this.props.name });
   }
   updateName(name) {
   this.setState({ name });
   }
   render() {
   return (
   
   Hello, my name is {this.state.name}
   
   type="text"
   value={this.state.name}
   onChange={e => this.updateName(e.target.value)}
   />
   
   
   );
   }
   }
   
   

   View Slide

10. 
    const NameTag = ({ name, onChange }) => (
    
    
    Hello, my name is {name}
    
    
    type="text"
    value={name}
    onChange={e => onChange(e.target.value)}
    />
    
    
    );
    

    View Slide

11. PROBLEMS
    STATE AND RESPONSIBILITY
    

    View Slide

12. const NameTag = ({ name, onChange }) => (
    
    
    Hello, my name is {name}
    
    
    type="text"
    value={name}
    onChange={e => onChange(e.target.value)}
    />
    
    
    );
    External state
    

    View Slide

13. const NameTag = ({ name, onChange }) => (
    
    
    Hello, my name is {name}
    
    
    type="text"
    value={name}
    onChange={e => onChange(e.target.value)}
    />
    
    
    );
    Who manages the state?
    

    View Slide

14. class NameTag extends React.Component {
    componentWillMount() {
    this.setState({ name: this.props.name });
    }
    updateName(name) {
    this.setState({ name });
    }
    render() {
    return (
    
    Hello, my name is {this.state.name}
    
    type="text"
    value={this.state.name}
    onChange={e => this.updateName(e.target.value)}
    />
    
    
    );
    }
    }
    

    View Slide

15. class NameTag extends React.Component {
    componentWillMount() {
    this.setState({ name: this.props.name });
    }
    updateName(name) {
    this.setState({ name });
    }
    render() {
    return (
    
    Hello, my name is {this.state.name}
    
    type="text"
    value={this.state.name}
    onChange={e => this.updateName(e.target.value)}
    />
    
    
    );
    }
    }
    

    View Slide

16. class NameTag extends React.Component {
    componentWillMount() {
    this.setState({ name: this.props.name });
    }
    updateName(name) {
    this.setState({ name });
    }
    render() {
    return (
    
    Hello, my name is {this.state.name}
    
    type="text"
    value={this.state.name}
    onChange={e => this.updateName(e.target.value)}
    />
    
    
    );
    }
    }
    Many components
    =>
    State strewn across app
    

    View Slide

17. class NameTag extends React.Component {
    componentWillMount() {
    this.setState({ name: this.props.name });
    }
    updateName(name) {
    this.setState({ name });
    }
    render() {
    return (
    
    Hello, my name is {this.state.name}
    
    type="text"
    value={this.state.name}
    onChange={e => this.updateName(e.target.value)}
    />
    
    
    );
    }
    }
    Intermingling view and behavior
    =>
    Violating SRP
    

    View Slide

18. PROBLEMS
    PROPS FATIGUE
    

    View Slide

19. const App = ({ name, onChangeName }) => (
    
    );
    const AppDashboard = ({ name, onChangeName }) => (
    
    
    
    
    
    );
    const User = ({ name, onChangeName }) => (
    
    );
    {
    name: 'Jeremy',
    onChangeName: (name) => {
    updateSomeGlobalState({ name });
    }
    }
    

    View Slide

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.)
    

    View Slide

21. + Redux =
    

    View Slide

22. {
    user: {
    name: 'Jeremy',
    email: 'jeremy@example.com',
    username: 'elpapapollo'
    }
    }
    Store
    App
    

    View Slide

23. Provider &
    connect
    {
    user: {
    name: 'Jeremy',
    email: 'jeremy@example.com',
    username: 'elpapapollo'
    }
    }
    Store
    App
    

    View Slide

24. {
    name: 'Jet',
    type: 'UPDATE_NAME'
    }
    Action
    Provider &
    connect
    {
    user: {
    name: 'Jeremy',
    email: 'jeremy@example.com',
    username: 'elpapapollo'
    }
    }
    Store
    App
    Dispatch
    

    View Slide

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
    

    View Slide

26. 
    
    
    Demo
    

    View Slide

27. Recap
    • Modularity
    • Modular React components
    • Modular Redux reducers
    and state
    

    View Slide

28. Resources
    • facebook.github.io/react
    • redux.js.org
    • egghead.io/series/getting-started-with-redux
    

    View Slide

29. Jeremy Fairbank
    blog.jeremyfairbank.com
    @elpapapollo | github.com/jfairbank
    THANKS!
    Code:
    github.com/jfairbank/modular-react-and-redux-talk
    

    View Slide