React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Agenda
❑ What Is Artificial Intelligence ?
❑ What Is Machine Learning ?
❑ Limitations Of Machine Learning
❑ Deep Learning To The Rescue
❑ What Is Deep Learning ?
❑ Deep Learning Applications

Agenda
Need For Redux
What Is Redux?
Redux Components
Setting Up Components
Data Flow
React With Redux
Demo

Need For Redux?
Why Redux was needed?

Need For Redux
As React is just the View, thus to control the Data Flow we use Redux as a Data Flow Architecture

Need For Redux
✓ In React the data flows through Components
✓ It follows uni-directional data flow i.e data always
flows from parent to child component.

Need For Redux
✓ Child components can’t pass data to its parent
component
✓ The non-parent components can’t communicate
within each other
✓ React doesn't recommend direct component-to-
component communication this way.

Need For Redux
✓ Redux offers a solution of storing all your application
state in one place, called a "store“
✓ Components then "dispatch" state changes to the
store, not directly to other components.
✓ The components that need to be aware of state
changes can "subscribe" to the store
Store
Dispatch
Subscribe

What Is Redux?
What exactly is Redux?

What Is Redux?
Redux one of the hottest libraries for front end development
Redux is a predictable state container for JavaScript apps
Mostly used for applications State Management
Developed by Dan Abramov and Andrew Clark in 2015
It is inspired by Facebook’s Flux and influenced by functional
programming language Elm

Principles Of Redux
1 Single Store
2 State Is Read-Only
3 Change Using Pure Functions

Principles Of Redux
1 Single Store
2 State Is Read-only
With only React Uni-directional Data Flow, direct
communication between components is not allowed

Principles Of Redux
1 Single Store
2 State Is Read-only
Store
Redux uses Store for storing all the application state
at one place. Components state is stored in the Store
and they receive updates from the store itself.

Principles Of Redux
2 State Is Read Only
1 Single Store
You can change the state only by triggering an
action which is an object describing what happened.
Action: No ACTION

Principles Of Redux
You can change the state only by triggering an
action which is an object describing what happened.
Action: switch ON
1 Single Store

Pure
Function
Principles Of Redux
1 Single Store
Prev StateACTION
New State
Pure functions called Reducers are used to indicate
how the State has been transformed by the Action

Redux Components
1
2
3
4
Action
Reducer
View
Store

Action
Application ACTION Store
Plain JavaScript objects which are payloads of information for the store
Data
DataData

Action
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
• Must have type property that indicates the type of ACTION being performed.
• They must be defined as String constant.
• You can add more properties to it.
ACTION

Action
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
• Functions which create ACTIONS
• Takes in the message, converts it into system understandable format and returns a formatted
Action Object.
ACTION
ACTION CREATOR

Reducer
Reducer
Prev State ACTION
New State
Reducers are pure functions which specify how the applications state changes in response to an ACTION
They do not change the value of the input parameter
Determines what sort of update needs to be done based on the type
of the action, and returns new values
It returns the previous state if no work needs to be done
The root reducer slices up the state based on the State Object Keys
and passes them to their respective specialized reducers
Reducers don’t manipulate the original state passed to them but
make their own copies and then updates them.

function reducer(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return Object.assign({}, state,
{ todos: [ ...state.todos,
{
text: action.text,
completed: false
}
]
})
default:
return state
}
}
Reducer
ACTION Prev State
New State

Reducer
Things you should NEVER do inside a reducer:
Mutate its arguments
Perform side effects like API calls and routing transitions
Call non-pure functions like Date.now() or Math.random()

Store
State Tree
Store
Store is an object which brings all the components to work together. It calculates the state changes and
then notifies the root reducer about it.
Application

Store
import { createStore } from 'redux'
import todoApp from './reducers’
let store = createStore(reducer)
• With Store the data state can be synchronized from the server level to the client layer without
much hassel.
• This makes the development of large applications easier and faster.
Store

Store Responsibilities
Store
Holding applications state
Allowing access to state via getState()
Allowing the states to be updated via dispatch(action)
Registering listeners via subscribe(listener)
Handles unregistering of listeners via the function returned by subscribe(listener)

View
Displays the data provided by the Store
Store Data View

View
• Smart Components are the managers who are in charge of the actions and pass down a function
in via the props to the dumb components.
• Dumb Components provide information to the smart components if any action is required. They
receive them as props and use them as callback.
STATEFUL
<Component/>
STATELESS
<Component/>
STATELESS
<Component/>

Data Flow

Data Flow
Redux architecture is concentrated on a strict unidirectional data flow
In an application all the data follows the same lifecycle pattern, making the logic of
your app more predictable and easier to understand.
It also encourages data normalization to ensure consistency

Data Flow
Reducers
Provider Component
Actions
One Store
Container
(Dumb Component)
Container
(Smart Component)
Re-render when
Store changes
Pass Data As Props
Store
Store
Store

Setting Up The Components
Get Store Ready Prepare Action Callbacks
Set Up Communication

Action
Creator

Reducers

Views

Store

Provider

Root
Component

Get Store Ready Prepare Action Callbacks

1. Get the store ready
Hey store you are Hired. Here is my
Reducer team to help you out.

2. Set up the communication between the store and the components
Hey Provider, this
is the store I hired
Ohk..let me set up a
network to keep your
components updated
Great! Let me connect
to get the updates

Get Store Ready
Prepare Action Callbacks

3. Prepare the action callbacks
I need to make it
easy for dumb
components to
understand
I should bind the action creator
and the dispatcher so that the
dumb component can just call the
callback

Data Flow
Name = Maxx

Data Flow
1
Type: NAME_UPDATE
Pos: 2
Value:”Maxx”
UID: 101

Data Flow
2
1

Data Flow
2
3
1
Here is the current
state tree.
Calculate how new
state tree should
look.

Data Flow
2
3
1
Here is
your slice 4

Data Flow
2
3
1
4
5
Let me just copy the
slice and update it.
Ohk.. Now this how the
slice looks like

Data Flow
2
3
1
4
5
6

Data Flow
2
3
1
4
5
6
7

Data Flow
2
3
1
4
5
6
7
8

Data Flow
2
3
1
4
5
6
7
8
Here is the new state
tree. Now you can re-
render your component
trees respectively
9

React With Redux

React With Redux
React bindings are not included in Redux by default so you need to install them explicitly:
npm install --save react-redux
You have to add these dependency along with babel, react and webpack

Demo

Demo
▪ We will be creating an simple User List application using Redux with React

Popularity

React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka

More Related Content

What's hot (20)

Similar to React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka (20)

More from Edureka! (20)

Recently uploaded (20)

React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka