Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
JS Summit: Modular React & Redux
Jeremy Fairbank
February 25, 2016
Programming
2
250
JS Summit: Modular React & Redux
Jeremy Fairbank
February 25, 2016
Tweet
Share
More Decks by Jeremy Fairbank
See All by Jeremy Fairbank
jfairbank
0
80
jfairbank
1
80
jfairbank
1
240
jfairbank
0
110
jfairbank
0
120
jfairbank
0
26
jfairbank
2
200
jfairbank
1
91
jfairbank
2
640
Other Decks in Programming
See All in Programming
shiba6v
0
200
yattom
32
11k
uhyo
19
9.2k
y__mattu
0
180
wafuwafu13
1
160
coe401_
3
160
ganchan11
0
160
sh_akira
3
120
andpad
0
380
dnskimo
8
1.5k
adarapata
1
470
timeseriesfr
0
120
Featured
See All Featured
tanoku
259
24k
edds
56
9.4k
lara
17
2.9k
mojombo
359
62k
rmw
12
870
samanthasiow
58
6.4k
notwaldorf
19
2.1k
trishagee
24
3k
smashingmag
232
18k
davidbonilla
70
3.6k
michaelherold
226
8.6k
afnizarnur
176
14k
Transcript
Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo | github.com/jfairbank MODULAR React& redux
We help brands excel. pushagency.io Your website, SimplyBuilt. simplybuilt.com
https://commons.wikimedia.org/wiki/File:2001_Monolith.jpg
https://commons.wikimedia.org/wiki/File:Close_up_of_Hand_Cut_Jigsaw_Puzzle.JPG
Modularity • Independent • Single Responsibility • Small • Testable
• Apply to React components • Apply to Redux state and reducers
None
None
<Dashboard> <Panel label="Account"> <PanelItem>Name: {user.name}</PanelItem> <PanelItem>Username: {user.username}</PanelItem> <PanelItem>Email: {user.email}</PanelItem> </Panel>
</Dashboard>
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"/>
<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> );
PROBLEMS STATE AND RESPONSIBILITY
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
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?
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> ); } }
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> ); } }
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
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
PROBLEMS PROPS FATIGUE
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 }); } }
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.)
+ Redux =
{ user: { name: 'Jeremy', email: 'jeremy@example.com', username: 'elpapapollo' }
} Store App
Provider & connect { user: { name: 'Jeremy', email: 'jeremy@example.com',
username: 'elpapapollo' } } Store App
{ name: 'Jet', type: 'UPDATE_NAME' } Action Provider & connect
{ user: { name: 'Jeremy', email: 'jeremy@example.com', username: 'elpapapollo' } } Store App Dispatch
{ 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
<Demo> <ContactManager/> </Demo> Demo
Recap • Modularity • Modular React components • Modular Redux
reducers and state
Resources • facebook.github.io/react • redux.js.org • egghead.io/series/getting-started-with-redux
Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo | github.com/jfairbank THANKS! Code: github.com/jfairbank/modular-react-and-redux-talk