SlideShare a Scribd company logo
React Native Munich Meetup
January 2017
INTRODUCTION TO
REDUX
Nacho Martín
@nacmartin
Nacho Martin
I write code at Limenius.
We build tailor-made projects,
and provide consultancy
and formation.
We are very happy with React and React Native.
What is Redux?
@dan_abramov
• State container
• Created by Dan Abramov
• Inspired by Flux and Elm
• Can be used without React
What problem does Redux
solve?
A simple component
A simple component
A simple component
A simple component
A simple component
We have a new requirement
Naive approach 1: pass props
Intermediate components receive props and
pass them to their children without using
them.
Cauliflower
Save
Your name: John
Hi, John
John’s stuff
Cauliflower
Save
Your name: John
Hi, John
John’s stuff
Cauliflower
Save
Your name: John
Hi, John
John’s stuff
state.name
Callback to change name
Naive approach 1: pass props
Intermediate components receive props and
pass them to their children without using
them.
Naive approach 1: pass props
Intermediate components receive props and
pass them to their children without using
them.
Problem: Messy
Difficult to understand the flow of data.
Naive approach 2: use context
Context is a way to pass data down to the
tree, without doing it manually.
Naive approach 2: use context
Context is a way to pass data down to the
tree, without doing it manually.
Problem: Dangerous
Context API is experimental
?
But Redux uses the Context
API internally. Isn’t it a
problem?
?
But Redux uses the Context
API internally. Isn’t it a
problem?
It is better to use libs that
use it than use it directly.
The Redux way
Example
export default class Counter extends Component {
constructor(props) {
super(props);
this.state = {counter: 0};
}
increment() {
this.setState({counter: this.state.counter + 1});
}
decrement() {
this.setState({counter: this.state.counter - 1});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{this.state.counter}
</Text>
<Button
onPress={this.increment.bind(this)}
title="Increment"
/>
<Button
onPress={this.decrement.bind(this)}
title="Decrement"
/>
</View>
);
}
}
increment() {
this.setState({counter: this.state.counter + 1});
}
decrement() {
this.setState({counter: this.state.counter - 1});
}
What about this?
dispatch(action) {
this.setState(reducer(this.state, action));
}
increment() {
this.dispatch({type: 'INCREMENT'});
}
decrement() {
this.dispatch({type: 'DECREMENT'});
}
What about this?
dispatch(action) {
this.setState(reducer(this.state, action));
}
increment() {
this.dispatch({type: 'INCREMENT'});
}
decrement() {
this.dispatch({type: 'DECREMENT'});
}
Action
What about this?
dispatch(action) {
this.setState(reducer(this.state, action));
}
increment() {
this.dispatch({type: 'INCREMENT'});
}
decrement() {
this.dispatch({type: 'DECREMENT'});
}
const reducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
default:
return state;
}
}
Action
Redux in a picture
Redux in a picture
Install redux
npm install --save redux react-redux
Actions
const increment = {
type: 'INCREMENT'
}
Only source of information from views to change state
Plain JS objects
Must have a type
Actions
Only source of information from views to change state
Plain JS objects
Must have a type
const todoAdd = {
type: 'TODO_ADD',
text: 'Buy some milk',
deadline: '15-01-2017 19:00h'
}
Objects can be as complex as needed, but keep it simple
Reducers
export default reducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
counter: state.counter + 1
};
case 'DECREMENT':
return {
...state,
counter: state.counter - 1
};
case 'DUPLICATE':
return {
...state,
counter: state.counter * 2
};
default:
return state;
}
}
From previous state and action produce next state
Store
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import counterReducer from './redux/reducer';
let store = createStore(counterReducer)
export default class CounterApp extends Component {
render() {
return (
<Provider store={store}>
<Counter/>
<Multiplier/>
</Provider>
);
}
}
Connect & dispatch
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default = connect(mapStateToProps)(Counter);
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default connect(mapStateToProps)(Counter);
Connect & dispatch
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default = connect(mapStateToProps)(Counter);
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default connect(mapStateToProps)(Counter);
Export the connected component
Connect & dispatch
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default = connect(mapStateToProps)(Counter);
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default connect(mapStateToProps)(Counter);
Export the connected component
Counter available via props
Connect & dispatch
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default = connect(mapStateToProps)(Counter);
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default connect(mapStateToProps)(Counter);
Export the connected component
Counter available via props
Review
Review
Demo
https://github.com/nacmartin/ReduxIntro
Tips
Keep your reducers pure
• Absolutely deterministic: the same input
produces the same result every time).
• No side effects: no calls to an API, no
changes to the outside world.
Combine reducers
import { combineReducers } from 'redux'
import counterReducer from './counter';
import todoReducer from './todo';
export default combineReducers({
todo,
counter
});
Model your state as a tree and write reducers for its branches
Selectors
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
}
const mapStateToProps = (state) => {
return { todos: getVisibleTodos(state.todos, state.visibilityFilter) }
}
export default VisibleTodoList = connect(
mapStateToProps,
)(TodoList)
Normalize data in the store and use selectors to derive data
Selectors with reselect
import { createSelector } from 'reselect'
const getVisibilityFilter = (state) => state.visibilityFilter
const getTodos = (state) => state.todos
export const getVisibleTodos = createSelector(
[ getVisibilityFilter, getTodos ],
(visibilityFilter, todos) => {
switch (visibilityFilter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
}
)
Memoized version, only computed when state.todos or
state.visibilityFilter change
Use constants for action types
Helps us to keep track of existing types, and detect typos
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const increment = {
type: INCREMENT_COUNTER
}
import { INCREMENT_COUNTER, DECREMENT } from './actionTypes'
Use action creators
export function increment() {
return {
type: INCREMENT
}
}
export function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
Use action creators
import { connect } from 'react-redux'
const Counter = (props) => {
return (
<View style={styles.counter}>
<Text>
{props.counter}
</Text>
<Button
onPress={() => {props.dispatch({type: 'INCREMENT'})}}
title="Increment"
/>
<Button
onPress={() => {props.dispatch({type: 'DECREMENT'})}}
title="Decrement"
/>
</View>
);
}
const mapStateToProps = (state) => {
return {
counter: state.counter,
}
};
export default = connect(mapStateToProps)(Counter);
import { increment } from ‘../actions';
const Counter = (props) => {
return (
<View style={styles.counter}>
<Button
onPress={() => {props.onIncrementClick()}}
title="Increment" />
</View>
);
}
const mapDispatchToProps = (dispatch) => {
return {
onIncrementClick: () => {
dispatch(increment())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
ducks-modular-redux
const LOAD = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}
// Action Creators
export function loadWidgets() {
return { type: LOAD };
}
export function createWidget(widget) {
return { type: CREATE, widget };
}
export function updateWidget(widget) {
return { type: UPDATE, widget };
}
export function removeWidget(widget) {
return { type: REMOVE, widget };
}
ducks-modular-redux
const LOAD = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}
// Action Creators
export function loadWidgets() {
return { type: LOAD };
}
export function createWidget(widget) {
return { type: CREATE, widget };
}
export function updateWidget(widget) {
return { type: UPDATE, widget };
}
export function removeWidget(widget) {
return { type: REMOVE, widget };
}
Action types
ducks-modular-redux
const LOAD = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}
// Action Creators
export function loadWidgets() {
return { type: LOAD };
}
export function createWidget(widget) {
return { type: CREATE, widget };
}
export function updateWidget(widget) {
return { type: UPDATE, widget };
}
export function removeWidget(widget) {
return { type: REMOVE, widget };
}
Action types
Reducer
ducks-modular-redux
const LOAD = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}
// Action Creators
export function loadWidgets() {
return { type: LOAD };
}
export function createWidget(widget) {
return { type: CREATE, widget };
}
export function updateWidget(widget) {
return { type: UPDATE, widget };
}
export function removeWidget(widget) {
return { type: REMOVE, widget };
}
Action types
Reducer
Action creators
ducks-modular-redux
Informed consent
Awesome DevTools
npm install --save-dev remote-redux-devtools
import devToolsEnhancer from 'remote-redux-devtools';
let store = createStore(counterReducer, devToolsEnhancer());
Awesome DevTools
import devToolsEnhancer from 'remote-redux-devtools';
let store = createStore(counterReducer, devToolsEnhancer());
Thanks! @nacmartin
nacho@limenius.com
http://limenius.com

More Related Content

What's hot

React Hooks
React HooksReact Hooks
React Hooks
Erez Cohen
 
Intro to React
Intro to ReactIntro to React
Intro to React
Eric Westfall
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
Emanuele DelBono
 
React js
React jsReact js
React js
Rajesh Kolla
 
Basics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfBasics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdf
Knoldus Inc.
 
React workshop
React workshopReact workshop
React workshop
Imran Sayed
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Samundra khatri
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
 
Introduction to react and redux
Introduction to react and reduxIntroduction to react and redux
Introduction to react and redux
Cuong Ho
 
React hooks
React hooksReact hooks
React hooks
Ramy ElBasyouni
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound
 
React js for beginners
React js for beginnersReact js for beginners
React js for beginners
Alessandro Valenti
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
Ritesh Mehrotra
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
Sergey Romaneko
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
 
reactJS
reactJSreactJS
reactJS
Syam Santhosh
 
React hooks
React hooksReact hooks
React hooks
Sadhna Rana
 

What's hot (20)

React Hooks
React HooksReact Hooks
React Hooks
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
React js
React jsReact js
React js
 
Basics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfBasics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdf
 
React workshop
React workshopReact workshop
React workshop
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
 
Introduction to react and redux
Introduction to react and reduxIntroduction to react and redux
Introduction to react and redux
 
React hooks
React hooksReact hooks
React hooks
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
React js for beginners
React js for beginnersReact js for beginners
React js for beginners
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
reactJS
reactJSreactJS
reactJS
 
React hooks
React hooksReact hooks
React hooks
 

Similar to Introduction to Redux

Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
Ignacio Martín
 
Recompacting your react application
Recompacting your react applicationRecompacting your react application
Recompacting your react application
Greg Bergé
 
React + Redux. Best practices
React + Redux.  Best practicesReact + Redux.  Best practices
React + Redux. Best practices
Clickky
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
Evangelia Mitsopoulou
 
Strategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux ApplicaitonsStrategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux Applicaitons
garbles
 
N Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React NativeN Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React Native
Anton Kulyk
 
React redux
React reduxReact redux
React redux
Michel Perez
 
Gerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRxGerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRx
Loiane Groner
 
Reactive.architecture.with.Angular
Reactive.architecture.with.AngularReactive.architecture.with.Angular
Reactive.architecture.with.Angular
Evan Schultz
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
DreamLab
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
Soluto
 
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-reduxEvan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
Ignacio Martín
 
Advanced redux
Advanced reduxAdvanced redux
Advanced redux
Boris Dinkevich
 
ReactJS
ReactJSReactJS
ReactJS
Kamlesh Singh
 
Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019
Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019
Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019
Codemotion
 
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JSFestUA
 
Ngrx slides
Ngrx slidesNgrx slides
Ngrx slides
Christoffer Noring
 
Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)
Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)
Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)
indeedeng
 
This is a C# project . I am expected to create as this image shows. .pdf
This is a C# project . I am expected to create as this image shows. .pdfThis is a C# project . I am expected to create as this image shows. .pdf
This is a C# project . I am expected to create as this image shows. .pdf
indiaartz
 

Similar to Introduction to Redux (20)

Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
 
Recompacting your react application
Recompacting your react applicationRecompacting your react application
Recompacting your react application
 
React + Redux. Best practices
React + Redux.  Best practicesReact + Redux.  Best practices
React + Redux. Best practices
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
Strategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux ApplicaitonsStrategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux Applicaitons
 
N Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React NativeN Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React Native
 
React redux
React reduxReact redux
React redux
 
Gerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRxGerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRx
 
Reactive.architecture.with.Angular
Reactive.architecture.with.AngularReactive.architecture.with.Angular
Reactive.architecture.with.Angular
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
 
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-reduxEvan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-redux
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
 
Advanced redux
Advanced reduxAdvanced redux
Advanced redux
 
ReactJS
ReactJSReactJS
ReactJS
 
Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019
Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019
Matteo Antony Mistretta - React, the Inglorious way - Codemotion Amsterdam 2019
 
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
 
Ngrx slides
Ngrx slidesNgrx slides
Ngrx slides
 
Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)
Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)
Indeed My Jobs: A case study in ReactJS and Redux (Meetup talk March 2016)
 
This is a C# project . I am expected to create as this image shows. .pdf
This is a C# project . I am expected to create as this image shows. .pdfThis is a C# project . I am expected to create as this image shows. .pdf
This is a C# project . I am expected to create as this image shows. .pdf
 

More from Ignacio Martín

Elixir/OTP for PHP developers
Elixir/OTP for PHP developersElixir/OTP for PHP developers
Elixir/OTP for PHP developers
Ignacio Martín
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
Ignacio Martín
 
Symfony 4 Workshop - Limenius
Symfony 4 Workshop - LimeniusSymfony 4 Workshop - Limenius
Symfony 4 Workshop - Limenius
Ignacio Martín
 
Server Side Rendering of JavaScript in PHP
Server Side Rendering of JavaScript in PHPServer Side Rendering of JavaScript in PHP
Server Side Rendering of JavaScript in PHP
Ignacio Martín
 
Extending Redux in the Server Side
Extending Redux in the Server SideExtending Redux in the Server Side
Extending Redux in the Server Side
Ignacio Martín
 
Redux Sagas - React Alicante
Redux Sagas - React AlicanteRedux Sagas - React Alicante
Redux Sagas - React Alicante
Ignacio Martín
 
React Native Workshop - React Alicante
React Native Workshop - React AlicanteReact Native Workshop - React Alicante
React Native Workshop - React Alicante
Ignacio Martín
 
Asegurando APIs en Symfony con JWT
Asegurando APIs en Symfony con JWTAsegurando APIs en Symfony con JWT
Asegurando APIs en Symfony con JWT
Ignacio Martín
 
Redux saga: managing your side effects. Also: generators in es6
Redux saga: managing your side effects. Also: generators in es6Redux saga: managing your side effects. Also: generators in es6
Redux saga: managing your side effects. Also: generators in es6
Ignacio Martín
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
Ignacio Martín
 
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Ignacio Martín
 
Adding Realtime to your Projects
Adding Realtime to your ProjectsAdding Realtime to your Projects
Adding Realtime to your Projects
Ignacio Martín
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
Ignacio Martín
 
Symfony 2 CMF
Symfony 2 CMFSymfony 2 CMF
Symfony 2 CMF
Ignacio Martín
 
Doctrine2 sf2Vigo
Doctrine2 sf2VigoDoctrine2 sf2Vigo
Doctrine2 sf2Vigo
Ignacio Martín
 
Presentacion git
Presentacion gitPresentacion git
Presentacion git
Ignacio Martín
 

More from Ignacio Martín (16)

Elixir/OTP for PHP developers
Elixir/OTP for PHP developersElixir/OTP for PHP developers
Elixir/OTP for PHP developers
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
 
Symfony 4 Workshop - Limenius
Symfony 4 Workshop - LimeniusSymfony 4 Workshop - Limenius
Symfony 4 Workshop - Limenius
 
Server Side Rendering of JavaScript in PHP
Server Side Rendering of JavaScript in PHPServer Side Rendering of JavaScript in PHP
Server Side Rendering of JavaScript in PHP
 
Extending Redux in the Server Side
Extending Redux in the Server SideExtending Redux in the Server Side
Extending Redux in the Server Side
 
Redux Sagas - React Alicante
Redux Sagas - React AlicanteRedux Sagas - React Alicante
Redux Sagas - React Alicante
 
React Native Workshop - React Alicante
React Native Workshop - React AlicanteReact Native Workshop - React Alicante
React Native Workshop - React Alicante
 
Asegurando APIs en Symfony con JWT
Asegurando APIs en Symfony con JWTAsegurando APIs en Symfony con JWT
Asegurando APIs en Symfony con JWT
 
Redux saga: managing your side effects. Also: generators in es6
Redux saga: managing your side effects. Also: generators in es6Redux saga: managing your side effects. Also: generators in es6
Redux saga: managing your side effects. Also: generators in es6
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
 
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
 
Adding Realtime to your Projects
Adding Realtime to your ProjectsAdding Realtime to your Projects
Adding Realtime to your Projects
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
 
Symfony 2 CMF
Symfony 2 CMFSymfony 2 CMF
Symfony 2 CMF
 
Doctrine2 sf2Vigo
Doctrine2 sf2VigoDoctrine2 sf2Vigo
Doctrine2 sf2Vigo
 
Presentacion git
Presentacion gitPresentacion git
Presentacion git
 

Recently uploaded

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 

Recently uploaded (20)

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 

Introduction to Redux

  • 1. React Native Munich Meetup January 2017 INTRODUCTION TO REDUX Nacho Martín @nacmartin
  • 2. Nacho Martin I write code at Limenius. We build tailor-made projects, and provide consultancy and formation. We are very happy with React and React Native.
  • 4. @dan_abramov • State container • Created by Dan Abramov • Inspired by Flux and Elm • Can be used without React
  • 5. What problem does Redux solve?
  • 11. We have a new requirement
  • 12. Naive approach 1: pass props Intermediate components receive props and pass them to their children without using them.
  • 15. Cauliflower Save Your name: John Hi, John John’s stuff state.name Callback to change name
  • 16. Naive approach 1: pass props Intermediate components receive props and pass them to their children without using them.
  • 17. Naive approach 1: pass props Intermediate components receive props and pass them to their children without using them. Problem: Messy Difficult to understand the flow of data.
  • 18. Naive approach 2: use context Context is a way to pass data down to the tree, without doing it manually.
  • 19. Naive approach 2: use context Context is a way to pass data down to the tree, without doing it manually. Problem: Dangerous Context API is experimental
  • 20. ? But Redux uses the Context API internally. Isn’t it a problem?
  • 21. ? But Redux uses the Context API internally. Isn’t it a problem? It is better to use libs that use it than use it directly.
  • 23. Example export default class Counter extends Component { constructor(props) { super(props); this.state = {counter: 0}; } increment() { this.setState({counter: this.state.counter + 1}); } decrement() { this.setState({counter: this.state.counter - 1}); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> {this.state.counter} </Text> <Button onPress={this.increment.bind(this)} title="Increment" /> <Button onPress={this.decrement.bind(this)} title="Decrement" /> </View> ); } }
  • 24. increment() { this.setState({counter: this.state.counter + 1}); } decrement() { this.setState({counter: this.state.counter - 1}); }
  • 25. What about this? dispatch(action) { this.setState(reducer(this.state, action)); } increment() { this.dispatch({type: 'INCREMENT'}); } decrement() { this.dispatch({type: 'DECREMENT'}); }
  • 26. What about this? dispatch(action) { this.setState(reducer(this.state, action)); } increment() { this.dispatch({type: 'INCREMENT'}); } decrement() { this.dispatch({type: 'DECREMENT'}); } Action
  • 27. What about this? dispatch(action) { this.setState(reducer(this.state, action)); } increment() { this.dispatch({type: 'INCREMENT'}); } decrement() { this.dispatch({type: 'DECREMENT'}); } const reducer = (state = { counter: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { counter: state.counter + 1 }; case 'DECREMENT': return { counter: state.counter - 1 }; default: return state; } } Action
  • 28. Redux in a picture
  • 29. Redux in a picture
  • 30. Install redux npm install --save redux react-redux
  • 31. Actions const increment = { type: 'INCREMENT' } Only source of information from views to change state Plain JS objects Must have a type
  • 32. Actions Only source of information from views to change state Plain JS objects Must have a type const todoAdd = { type: 'TODO_ADD', text: 'Buy some milk', deadline: '15-01-2017 19:00h' } Objects can be as complex as needed, but keep it simple
  • 33. Reducers export default reducer = (state = { counter: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'DUPLICATE': return { ...state, counter: state.counter * 2 }; default: return state; } } From previous state and action produce next state
  • 34. Store import { Provider } from 'react-redux' import { createStore } from 'redux' import counterReducer from './redux/reducer'; let store = createStore(counterReducer) export default class CounterApp extends Component { render() { return ( <Provider store={store}> <Counter/> <Multiplier/> </Provider> ); } }
  • 35. Connect & dispatch import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default = connect(mapStateToProps)(Counter); import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default connect(mapStateToProps)(Counter);
  • 36. Connect & dispatch import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default = connect(mapStateToProps)(Counter); import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default connect(mapStateToProps)(Counter); Export the connected component
  • 37. Connect & dispatch import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default = connect(mapStateToProps)(Counter); import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default connect(mapStateToProps)(Counter); Export the connected component Counter available via props
  • 38. Connect & dispatch import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default = connect(mapStateToProps)(Counter); import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default connect(mapStateToProps)(Counter); Export the connected component Counter available via props
  • 42. Tips
  • 43. Keep your reducers pure • Absolutely deterministic: the same input produces the same result every time). • No side effects: no calls to an API, no changes to the outside world.
  • 44. Combine reducers import { combineReducers } from 'redux' import counterReducer from './counter'; import todoReducer from './todo'; export default combineReducers({ todo, counter }); Model your state as a tree and write reducers for its branches
  • 45. Selectors const getVisibleTodos = (todos, filter) => { switch (filter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) } } const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } export default VisibleTodoList = connect( mapStateToProps, )(TodoList) Normalize data in the store and use selectors to derive data
  • 46. Selectors with reselect import { createSelector } from 'reselect' const getVisibilityFilter = (state) => state.visibilityFilter const getTodos = (state) => state.todos export const getVisibleTodos = createSelector( [ getVisibilityFilter, getTodos ], (visibilityFilter, todos) => { switch (visibilityFilter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) } } ) Memoized version, only computed when state.todos or state.visibilityFilter change
  • 47. Use constants for action types Helps us to keep track of existing types, and detect typos const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; const increment = { type: INCREMENT_COUNTER } import { INCREMENT_COUNTER, DECREMENT } from './actionTypes'
  • 48. Use action creators export function increment() { return { type: INCREMENT } } export function addTodo(text) { return { type: ADD_TODO, text } }
  • 49. Use action creators import { connect } from 'react-redux' const Counter = (props) => { return ( <View style={styles.counter}> <Text> {props.counter} </Text> <Button onPress={() => {props.dispatch({type: 'INCREMENT'})}} title="Increment" /> <Button onPress={() => {props.dispatch({type: 'DECREMENT'})}} title="Decrement" /> </View> ); } const mapStateToProps = (state) => { return { counter: state.counter, } }; export default = connect(mapStateToProps)(Counter); import { increment } from ‘../actions'; const Counter = (props) => { return ( <View style={styles.counter}> <Button onPress={() => {props.onIncrementClick()}} title="Increment" /> </View> ); } const mapDispatchToProps = (dispatch) => { return { onIncrementClick: () => { dispatch(increment()) } } } export default connect(mapStateToProps, mapDispatchToProps)(Counter);
  • 50. ducks-modular-redux const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMOVE = 'my-app/widgets/REMOVE'; // Reducer export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } } // Action Creators export function loadWidgets() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; }
  • 51. ducks-modular-redux const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMOVE = 'my-app/widgets/REMOVE'; // Reducer export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } } // Action Creators export function loadWidgets() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; } Action types
  • 52. ducks-modular-redux const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMOVE = 'my-app/widgets/REMOVE'; // Reducer export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } } // Action Creators export function loadWidgets() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; } Action types Reducer
  • 53. ducks-modular-redux const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMOVE = 'my-app/widgets/REMOVE'; // Reducer export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } } // Action Creators export function loadWidgets() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; } Action types Reducer Action creators
  • 55. Awesome DevTools npm install --save-dev remote-redux-devtools import devToolsEnhancer from 'remote-redux-devtools'; let store = createStore(counterReducer, devToolsEnhancer());
  • 56. Awesome DevTools import devToolsEnhancer from 'remote-redux-devtools'; let store = createStore(counterReducer, devToolsEnhancer());