An Introduction to Redux
- 1. Redux
- 2. HELLO! I am Hiten Pratap Singh You can find me at https://github.com/hitenpratap/ https://hprog99.wordpress.com/ [email protected] https://hitenpratap.github.io
- 3. Redux It can be used with any framework like Angular, ReactJS, VueJS etc
- 4. Flux Architecture Flux, a programming pattern takes care of the M in the MVC
- 5. Flux Architecture ✘ Responsible for creating data layers in JavaScript applications ✘ Follows the concept of unidirectional data flow ✘ Not actually an framework/library rather an architecture ✘ Many implementations out there like Redux, Reflux, Fluxxor, Flummox and Alt etc.
- 7. Why Redux is needed? Why should I use another framework/lib?
- 8. Why Redux is needed!
- 9. What is Redux? Why it stands out among other implementations of Flux
- 10. What’s Redux? Redux is a predictable state container for JavaScript apps. You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).
- 11. Redux Data FLow
- 12. Principles of Redux What are they?
- 13. Principles of Redux ✘ The state is immutable and cannot change in place. ✘ Only way to change the state is by sending a signal to the store. ✘ Changes are made with pure functions.
- 14. Building Blocks of Redux Pillars of Redux!
- 15. Building Blocks of Redux! ✘ Actions ✘ Reducers ✘ Store
- 16. Actions Actions are payloads of information that send data from your application to your store. You send them to the store using store.dispatch() Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed.
- 17. Reducers Reducers specify how the application's state changes in response to actions sent to the store. Actions only describe the fact that something happened, but don't describe how the application's state changes.
- 18. Store A store is an object that brings them together. A store has the following responsibilities: ✘ Holds application state ✘ Allows access to state via getState() ✘ Allows state to be updated via dispatch(action) ✘ Registers listeners via subscribe(listener) ✘ Handles unregistering of listeners via the function returned by subscribe(listener)
- 19. Redux API Redux store exposes a simple API
- 20. Redux API ✘ getState for accessing the current state of the application ✘ dispatch for dispatching an action ✘ subscribe for listening on state changes
- 21. How Redux is different from Flux? What are these?
- 22. Difference between Redux and Flux
- 23. THANKS! Any questions? You can find me at: https://github.com/hitenpratap/ https://hprog99.wordpress.com/ [email protected] https://hitenpratap.github.io
- 24. References ✘ https://medium.com/@cabot_solutions/flux-the-react-js-application-architecture-a-compre hensive-study-fd2585d06483 ✘ https://www.valentinog.com/blog/react-redux-tutorial-beginners/ ✘ https://medium.com/netscape/beginners-guide-to-react-redux-how-to-start-learning-and- not-be-overwhelmed-af04353101e ✘ https://appdividend.com/2017/08/23/redux-tutorial-example-scratch/ ✘ https://redux.js.org ✘ https://edgecoders.com/the-difference-between-flux-and-redux-71d31b118c1 ✘ http://almerosteyn.com/2016/08/redux-explained-again ✘ https://joesasson.github.io/2017/03/03/the-problem-that-redux-solves-in-one-simple-exa mple.html ✘