An Introduction to Redux
•
0 likes•1,421 views
This document provides an introduction to Redux, including what it is, its core principles and building blocks. Redux is a predictable state container for JavaScript apps that can be used with frameworks like React, Angular and Vue. It follows the Flux architecture pattern and is based on three principles - state is immutable, state can only be changed through actions, and changes are made with pure functions called reducers. The main building blocks are actions, reducers and the store.
Report
Share
Related slideshows
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/ hiten@fintechlabs.in 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/ hiten@fintechlabs.in 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 ✘