• Pass all <ButtonNavItem/> required props to <ButtonNavList/> • Handle its events in <ButtonNavList/> • Handle its events in <WidgetsEdit/> If your think YES, plz keep there… Handle child logic in top-level component. Both ways are not good… Not Convenient Dirty! Should <ButtonNavItem/> appear in top-level as illustrated?
difficult easier • Top-down props including events is not required • Mixed Separation of concerns • View logic • Data fetching goes to ”Action” • Data decoration goes to “Reducer” • Poor Better state management • Component App-specific • Mutable Immutable • Not Maintainable
sortPlugins(by, direction = 'desc') { return { type: 'SORT_PLUGINS', by, direction }; } Reusable, Portable, and Easy to Test (Return promise for asynchronous action) Make it easier to create an action
plugins: { data: [ {id: 1, name: 'AdRoll'}, {id: 2, name: 'Agile CRM'}, {id: 3, name: 'Brand Networks'} ], orderBy: 'id', orderByDirection: 'desc' } } Dispatching actions is the only way to update store Store is the only one state for the whole app
createStore(reducerFn); store.subscribe(eventHandlerFn); App store.dispatch(actionCreatorFn); reducerFn = (currentState, action) => nextState That’s it! • Super easy for both code and concept • Pure functions & objects w/o side-effects • Provides a better data flow for JS apps • Not just for React.js apps • jQuery or Node.js? No problem!
Delegation is easier • Top-down props is not required • Separation of concerns • View logic • Data fetching goes to ”Action” • Data decoration goes to “Reducer” • Better state management • App-specific • Immutable • Maintainable • Delegation is easier • Top-down props is not required
'react'; import {connect} from 'react-redux'; import {fetchData} from ‘./actions'; class WidgetsEdit extends Component { constructor(props) { super(props); } componentWillMount() { this.props.dispatch(fetchData()); } render() { return ( <ButtonNavList> <ButtonNavItem/> <ButtonNavList> <StylePreview/> <CodeEditor/> ) } } WidgetsEdit = connect(mapStateToProps)(WidgetsEdit); who only cares about himself Delegation = Preparing data and dispatching for itself
complexity but also add maintenance = worthy • Single Store • Time Travel (e.g. Undo) is possible • No need to access React state API anymore • Not only for React.js