Jeremy Fairbankblog.jeremyfairbank.com@elpapapollo | github.com/jfairbankMODULARReact& redux
View Slide
We help brands excel.pushagency.ioYour 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 andreducers
Name: {user.name}Username: {user.username}Email: {user.email}
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)}/>);}}
const NameTag = ({ name, onChange }) => (Hello, my name is {name}type="text"value={name}onChange={e => onChange(e.target.value)}/>);
PROBLEMSSTATE AND RESPONSIBILITY
const NameTag = ({ name, onChange }) => (Hello, my name is {name}type="text"value={name}onChange={e => onChange(e.target.value)}/>);External state
const NameTag = ({ name, onChange }) => (Hello, my name is {name}type="text"value={name}onChange={e => onChange(e.target.value)}/>);Who manages the state?
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
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
PROBLEMSPROPS FATIGUE
const App = ({ name, onChangeName }) => ();const AppDashboard = ({ name, onChangeName }) => ();const User = ({ name, onChangeName }) => ();{name: 'Jeremy',onChangeName: (name) => {updateSomeGlobalState({ name });}}
Wishlist• Manage state in one placeoutside of components in amodular fashion.• Define behavior separatefrom view.• Inject props without deeppassing. (Like partialapplication.)
+ Redux =
{user: {name: 'Jeremy',email: '[email protected]',username: 'elpapapollo'}}StoreApp
Provider &connect{user: {name: 'Jeremy',email: '[email protected]',username: 'elpapapollo'}}StoreApp
{name: 'Jet',type: 'UPDATE_NAME'}ActionProvider &connect{user: {name: 'Jeremy',email: '[email protected]',username: 'elpapapollo'}}StoreAppDispatch
{name: 'Jet',type: 'UPDATE_NAME'}ActionProvider &connect{user: {name: 'Jet',email: '[email protected]',username: 'elpapapollo'}}New Store StateAppDispatch{user: {name: 'Jeremy',email: '[email protected]',username: 'elpapapollo'}}StoreReducer
Demo
Recap• Modularity• Modular React components• Modular Redux reducersand state
Resources• facebook.github.io/react• redux.js.org• egghead.io/series/getting-started-with-redux
Jeremy Fairbankblog.jeremyfairbank.com@elpapapollo | github.com/jfairbankTHANKS!Code:github.com/jfairbank/modular-react-and-redux-talk