Academy PRO: React JS. Redux & Tooling
Download as PPTX, PDF3 likes439 views
The document discusses ReactJS as a UI library and contrasts it with MVC architecture, highlighting the introduction of Flux by Facebook for managing unidirectional data flow. It explains the evolution to Redux, detailing its principles like one global state, pure functions, and separation of concerns, ultimately emphasizing its advantages over Flux. Additionally, it touches upon the role of Webpack in optimizing JavaScript modules and project builds for better performance.
More Related Content
Similar to Academy PRO: React JS. Redux & Tooling(20)
More from Binary Studio(20)
Academy PRO: React JS. Redux & Tooling
- 1.
- 2. React JS JS libraryfocused on UI, not a framework one-way data flow VirtualDOM
- 3. UI = f(x) ReactJS F- Component x - state
- 4.
- 5.
- 6.
- 7. 2014 30th of April F8Facebook Developer Conference
- 8.
- 9.
- 10. Flux Action Dispatcher Store View ● Instead ofMVC for React ● Unidirectional data flow ● Created by Facebook ● Many stores Store Store ...
- 11. Dispatcher Central hub thatmessages all data flow It is a registry of callbacks into the store => mechanism to deliver actions into the stores Action Dispatcher Store ViewStore Store ...
- 12. Actions triggered by theview information about changes Action Dispatcher Store ViewStore Store ...
- 13. Store application state reacts tospecific actions issue events when data or state updated Action Dispatcher Store ViewStore Store ...
- 14. Views Triggers actions Reacts tospecific events in the store Action Dispatcher Store ViewStore Store ...
- 15. Race of Fluximplementations relay flux alt reflux flummox fluxible fluxxor marty.js
- 16. Problems of Flux Storecontains store change logic and state The state is being rewritten with every action Dispatcher cannot dispatch while dispatching
- 17. 2015 End of therace Redux wins!
- 18. Why Redux? 1. Oneglobal state 2. New state after each action (Time traveling) 3. State is read-only 4. Changes are made with pure functions (reducers) 5. Hot reload
- 19. Redux View layer Action Dispatcher StoreView Provider Connect
- 20. ( previousState, action) => newState Basic principle
- 21. Redux flow -Action Whenever you want to change the state of the application, you shoot off an action. Action function returns a formatted action object
- 22. Redux flow -Reducer Every reducer: receive state return new state Not mutated old state! new one!
- 23. Redux flow -Store
- 24. Redux flow -Connect
- 25. Smart elements How thingsworks no DOM markup, no styles Provide data call actions
- 26. Dumb elements How thingslook No app dependencies Just props for data and callbacks only UI state
- 27. Solved issues 1. Delegationis easier a. top-down props is not required 2. Separation of concerns a. Data fetching => actions b. Data decorations => reducer c. view logic 3. State management a. App-specific
- 28. Redux Summary One store Reducers=== (previousState, action) => newState State changes only in reducers Structured code We have access to state in every moment
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. Webpack Like Grunt orGulp, but different Bundles Uses javascript modules Reduce the amount of AJAX requests Totally configurable
- 36.
- 37. Webpack http://webpack.github.io/docs/configuration.html Output: ● path -location where webpack will build the files ● publicPath - location where wwbpack serves files from.
- 38. Webpack http://webpack.github.io/docs/configuration.html Loaders: ● Like tasks ●Transform files ● Preprocess files as you require or import them. Preloaders - the same but before executing loaders and building bundles
- 39.
- 40.
- 41.
- 42. Webpack-dev-server When you needHTTP Serves files virtually Hot reload (works on socket.io)
- 43.
- 44.
- 45. Links Redux video: egghead Flux:Rus/Eng Redux: Rus/Eng
- 46.
- 47.