Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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}

this.updateName(e.target.value)} />

); } }

Slide 10

Slide 10 text

const NameTag = ({ name, onChange }) => (

Hello, my name is {name}

onChange(e.target.value)} />

);

Slide 11

Slide 11 text

PROBLEMS STATE AND RESPONSIBILITY

Slide 12

Slide 12 text

const NameTag = ({ name, onChange }) => (

Hello, my name is {name}

onChange(e.target.value)} />

); External state

Slide 13

Slide 13 text

const NameTag = ({ name, onChange }) => (

Hello, my name is {name}

onChange(e.target.value)} />

); Who manages the state?

Slide 14

Slide 14 text

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}

this.updateName(e.target.value)} />

); } }

Slide 15

Slide 15 text

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}

this.updateName(e.target.value)} />

); } }

Slide 16

Slide 16 text

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}

this.updateName(e.target.value)} />

); } } Many components => State strewn across app

Slide 17

Slide 17 text

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}

this.updateName(e.target.value)} />

); } } Intermingling view and behavior => Violating SRP

Slide 18

Slide 18 text

PROBLEMS PROPS FATIGUE

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

+ Redux =

Slide 22

Slide 22 text

{ user: { name: 'Jeremy', email: '[email protected]', username: 'elpapapollo' } } Store App

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

{ 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

Slide 26

Slide 26 text

Demo

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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