An Introduction to Redux

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

Redux
It can be used with any framework like
Angular, ReactJS, VueJS etc

Flux Architecture
Flux, a programming pattern takes care of the M in the MVC

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.

Why Redux is needed?
Why should I use another framework/lib?

What is Redux?
Why it stands out among other implementations of Flux

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).

Principles of Redux
What are they?

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.

Building Blocks of Redux
Pillars of Redux!

Building Blocks of Redux!
✘ Actions
✘ Reducers
✘ Store

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.

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.

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)

Redux API
Redux store exposes a simple API

Redux API
✘ getState for accessing the current state of
the application
✘ dispatch for dispatching an action
✘ subscribe for listening on state changes

How Redux is different from Flux?
What are these?

Difference between Redux and Flux

THANKS!
Any questions?
You can find me at:
https://github.com/hitenpratap/
https://hprog99.wordpress.com/
hiten@fintechlabs.in
https://hitenpratap.github.io

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
✘

An Introduction to Redux

More Related Content

What's hot

Similar to An Introduction to Redux

More from NexThoughts Technologies

Recently uploaded

An Introduction to Redux