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.

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.

6. Flux Data FLow

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
✘