Wrap up Presentation Flux/Redux
•Als PPTX, PDF herunterladen•
2 gefällt mir•412 views
A wrap up presentation about real-time client-side application developed using Flux/Redux and React
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Wrap up Presentation Flux/Redux
Ähnlich wie Wrap up Presentation Flux/Redux (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Wrap up Presentation Flux/Redux
- 2. • Flux • Redux • Action creators • State • Containers and Selectors • Middleware • Perks • Perf tricks (React & Redux) GENERAL OVERVIEW
- 3. FLUX
- 5. • Not a lib • Not a framework • No precise guidelines or best practices • DIY • But a mainstream winner: redux FLUX
- 6. REDUX
- 7. REDUX • 5 JS functions • Opinionated flux implementation • Add-on Ecosystem • Compatible with other rendering frameworks (ng, ng2, bb, polymer, ember)
- 9. ACTION CREATORS ACTION { type: DISPLAY_PLAYER_PANEL, playerId: ‘7’ } ACTION CREATOR const displayPlayerPanel = playerId => ({type: DISPLAY_PLAYER_PANEL, playerId}) DISPATCHER ACTION CREATOR ACTION CREATOR ACTION CREATOR
- 10. SECUNDUM REDUX STATE • State of the app (raw data, conformation) • Managed by a single store • ℂ handled via composed reducers • Represented as a litteral Object in JS • Immutable • Deep nesting or over ℂ should be banned DISPATCHER REDUCER APP STATE REDUCER REDUCER Event bus
- 11. STATE e.g.: { players: { ‘46’: {name, seed}, ‘21’: {name, seed}, … } displayedPlayers: [’56’, ’48’, ‘2’, ’89’], currentOrdering: ‘seed’, route: [‘players’, ‘panel’] }
- 12. NAMED AFTER THEIR SIGNATURE REDUCERS • A reducer is a pure function • no scope impact • synchronous • Signature: (state, action) -> state
- 13. REDUCERS • Reducers can be composed : const reducer0 = combine({ players: reducer1, displayedPlayers: reducer2, currentOrdering: reducer3 … }) // has a reducer signature
- 14. REDUCERS • Reducers can be nested : // in players reducer const newState = players.map( player => playerReducer(state(playerId), player) )
- 15. ACTION CREATOR REDUCER REDUCER ACTION CREATOR ACTION CREATOR APP STATE CONTAINERS • Select (/Transform) state • Select action creators -> So that they can be ingested by views CONTAINER CONTAINER CONTAINER
- 16. Selectors • are pure functions • create a custom representation of the app state // Object(~Map) -> Object(~Map) ({players, displayedPlayers}) => ({ players: displayedPlayers .map(playerId => players[playerId]) .sort() }) CONTAINERS/SELECTORS
- 17. Containers connect state, action creators and view // state selector const mapStateToProps = (state) => ({ ordering: state.currentOrdering }) // action creators picker const mapDispatchToProps = (dispatch) => bindActionCreators({ changeOrdering }, dispatch) exports = connect(mapStateToProps, mapDispatchToProps)(ReactComp) CONTAINERS/CONNECT
- 19. What about AJAX call or Websocket frames ? What about effects in time ? What about everything async ?
- 20. MIDDLEWARE DISPATCHE R REDUCER ACTION CREATOR ACTION CREATOR ACTION CREATOR REDUCER MW MW MW NET TIME R Event bus
- 21. Middleware manage all asynchronous processes module.exports = store => next => action => { // do something async if (action.type === FETCH_PLAYERS_INFO) fetch(url).then(store.dispatch(updatePlayersInfo)) // handover action to store (reducers) next(action) } MIDDLEWARE
- 23. PERKS • Mostly declarative • Testability • Race conditions • Scalability • SOC • Becoming mainstream
- 24. PERF TRICKS • NATIVE requestAnimationFrame • REACT shouldComponentUpdate • REACT pureRenderMixin • REDUX batchActions • REDUX Initializers REACT & REDUX
- 25. RESOURCES • VIDEO https://egghead.io/series/getting-started-with-redux • FAQ http://redux.js.org/docs/FAQ.html • POST https://facebook.github.io/react/docs/advanced-performance.html • LIB https://github.com/tshelburne/redux-batched-actions