Understanding Redux — Ilya Gelman
6 likes943 views
The document discusses Redux, highlighting its structure and components such as the store, reducers, and how to manage application state using a uni-directional data flow. It provides examples of integrating Redux with React, including setting up the store and connecting components to it. The author, Ilya Gelman, emphasizes the importance of pure functions and maintaining a single application state throughout the app.
Understanding Redux — Ilya Gelman
- 2. Ilya Gelman - Organizer of AngularJS-IL & ReactJS-Israel - Passionate about design and UX Consultant @ 500Tech
- 8. User Interface Controller Model Model Model Model
- 9. User Interface Controller Model Model Model Model Model
- 10. User Interface Controller Model Library Model Model Model Model Model
- 11. User Interface Controller Model LibraryLibrary Model Model Model Model Model Model Model
- 12. MVVC
- 14. NEW MINDSET
- 15. User Interface
- 17. User Interface Dispatcher Stores UNI-DIRECTIONAL DATA FLOW StoresStores
- 18. UI IS RENDERED
- 19. UI IS RENDERED SOMETHING HAPPENED
- 20. UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI RENDERED
- 21. FLUX
- 22. KEEP IT SIMPLE
- 25. PURE* FUNCTION Current State Action New State * No side-effects How to change the state
- 27. PURE* FUNCTION Current State Action New State const newState = reducer(previousState, action); { type: 'ACTION_TYPE', /*...*/ }
- 28. import { createStore } from 'redux'; const store = createStore(reducer, initialState); Responsible for creating a new state every time The first state we pass to the reducer
- 29. Store
- 31. function createStore(reducer, initialState) { let state = initialState; return { dispatch(action) { state = reducer(state, action); }, getState() { return state; } } } Basic Redux
- 32. REDUX ♥ VANILLA JS
- 33. REDUX
- 34. ONE MORE THING…
- 35. npm install --save react-redux
- 36. 1. Put the in context import { render } from 'react-dom'; import { Provider } from 'react-redux'; render ( <Provider store={ store }> <Root /> </Provider>, document.getElementById('app') ); Store
- 37. 2. Connect components to store import { connect } from 'react-redux'; const ImageList = ({ images }) => ( <ul> { images.map((url, index) => ( <li key={ index }>{ url }</li>) ) } </ul> ); const mapStateToProps = (state) => ({ images: state.images }); export default connect(mapStateToProps)(ImageList);
- 38. connect( mapStateToProps, mapDispatchToProps, … ) Maps part of the state to component’s props Maps dispatch functions to component’s props
- 39. REDUX ♥ REACT
- 40. REDUX ♥ ANGULAR
- 41. REDUX ♥ JQUERY
- 42. REDUX ♥ BACKBONE
- 43. ♥ REDUX
- 44. QUESTIONS?
- 45. Read our blog: http://blog.500tech.com Ilya Gelman ilya@500tech.com