Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Summit: Modular React & Redux

JS Summit: Modular React & Redux

Jeremy Fairbank

February 25, 2016
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

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: '[email protected]',
    username: 'elpapapollo'
    }
    }
    Store
    App

    View Slide

  23. Provider &
    connect
    {
    user: {
    name: 'Jeremy',
    email: '[email protected]',
    username: 'elpapapollo'
    }
    }
    Store
    App

    View Slide

  24. {
    name: 'Jet',
    type: 'UPDATE_NAME'
    }
    Action
    Provider &
    connect
    {
    user: {
    name: 'Jeremy',
    email: '[email protected]',
    username: 'elpapapollo'
    }
    }
    Store
    App
    Dispatch

    View Slide

  25. {
    name: 'Jet',
    type: 'UPDATE_NAME'
    }
    Action
    Provider &
    connect
    {
    user: {
    name: 'Jet',
    email: '[email protected]',
    username: 'elpapapollo'
    }
    }
    New Store State
    App
    Dispatch
    {
    user: {
    name: 'Jeremy',
    email: '[email protected]',
    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