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

More Related Content

Similar to Let's start with REDUX (20)

More from Cubet Techno Labs (6)

Recently uploaded (20)

Let's start with REDUX