Let's start with REDUX

“Let’s Start With
REDUX”
Cubet Seminar
Presented by “Pooja Jayaraj ”
“We help build and architect IT solutions”

About Cubet
Founded in 2007, Cubet Techno Labs
is an end-to-end SMAC (social,
mobile, analytics and cloud) consulting
company with offices at Kochi, India
and London, UK. With expertise in
insightful product strategy, well-crafted
design and proficient development for
high-end web and mobile application
technologies.
Where we stand
Visit – www.cubettech.com

What is Redux ?
❖Predictable state container for javascript apps
❖Redux is an evolution of a concept called flux
❖Light weight implementation of flux (24 kb)
❖Redux was created by Dan Abramov around June 2015

Why Redux ?
 One way data flow
 State is immutable
 Easily testable.
 We can write Redux apps with React, Angular, Ember, jQuery, or
vanilla JavaScript.
 Relies heavily on functional programming language

Installation
● To install stable version, npm install --save redux
● Complementary Packages
○ npm install --save react-redux
○ npm install --save-dev redux-devtools
Using redux-devtools we can ,live code editing combined with a time
traveling debugger.

Three Principles:
 Action
 Reducers
 Store

Presentational and Container
Components
 A Presentational Component is a component that just renders
HTML
 Presentational Component does not interact with the Redux store
 Presentational Component accepts input like props from a
Container Component
 The Container Component specifies the data and state a
presentational component should render
 Container Component is the one to dispatch an action to the
Redux store

Action
 An action in Redux is a payload of information
 Changes are made with pure javascript functions
 Represented using json with type attribute and state object
 Action will be dispatched to a reducer
 Action Creator - it's simply a function which creates action

Example :
dispatch(addTodo(text)) - call from component
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

Reducer:
 Takes an action and a state, returns a new state
 (previousState, action) => newState
 Pure javascript functions
 combineReducers(reducers)
 A helper function turns an object whose values are
different reducing functions into a single reducing function
you can pass to createStore.

Example :
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([ action.text ])
default:
return state
}
}

let todoApp = combineReducers({
todos,
visibleTodoFilter
})
Result:
return {
todos: nextTodos,
visibleTodoFilter: nextVisibleTodoFilter
}

Store
A store holds the whole state tree of your application.
The only way to change the state inside it is to dispatch an action on it.
There should only be a single store in your app
Methods to interact with store
● getState()
● dispatch(action)
● subscribe(listener)
● replaceReducer(nextReducer)

getState()
Returns the current state tree of your application.
Eg:- const myErrors = store.getState().errors;
dispatch(action)
Dispatches an action. This is the only way to trigger a state change
We can include custom middleware functions to the dispatch method of
your store

subscribe(listener)
Adds a change listener
It will be called any time an action is dispatched
replaceReducer(nextReducer)
Advanced api
Replaces the reducer currently used by the store to calculate the
state.

Example:
import { createStore } from 'redux'
let store = createStore(todoApp)
store.subscribe(listener)
console.log(store.getState())

Conclusion
 Redux is powerful for building predictable, testable maintainable
interface
 Redux makes you a better UI engineer by forcing you to handle state
changes explicitly
 Redux allows you to manage state with a minimal API but completely
predictable behaviour

Our Technologies Stack:
Server Side Application JavaScript Frameworks
Mobile App Development
Database System and Cloud

THANKS!
ANY QUESTIONS? PLEASE GET IN TOUCH!
www.cubettech.com
Email : info@cubettech.com
Skype : cubet.se
Phone: +91 484 405 4324

Contact us:
Kemp House
160 City Road
London- EC1V2NX,
UK.info@cubettech.com
+44 2071938618
Carnival Info Park,
Unit IX-C, 9th floor PhaseIV,
Kochi, Kerala, India
info@cubettech.com
+91 484 4054324

Let's start with REDUX

Recommended

Recommended

More Related Content

Similar to Let's start with REDUX

Similar to Let's start with REDUX (20)

More from Cubet Techno Labs

More from Cubet Techno Labs (6)

Recently uploaded

Recently uploaded (20)

Let's start with REDUX