Embed Size (px)
Citation preview
Designing applicationswith Redux
Fernando Daciuknpm install fdaciuk
http://zimp.me
da2k.com.br
Daciuk = Da”Two”k
Daciuk = Da2k
JAVASCRIPTNINJA
eventick.com.br/curso-javascript-ninja
“Redux is a predictable state container
for JavaScript apps”http://redux.js.org
Why have Reduxwas created?
“Once upona time…”
Serverresponses
Cacheddata
Local non-persistent data
UIstate
Managing this ever-change state
is hard!
Mutation andasynchronicity
Mentos &Coke
React removes async and directDOM manipulation
You even needmanage state
Behold, theFlux comes!
Redux makes predictablestate changes
Redux:three principles
Redux:three principles
1st. Single sourceof truth
store
Redux:three principles
store
Redux:three principles
{ counter: 0, todos: [{ … }]}
Redux:three principles
2nd. state isread-only
actions
Redux:three principles
actions{ type: ‘WHAT_TODO’ }
Redux:three principles
Redux:three principles
3rd. changes are madewith pure functions
reducers
Redux:three principles
reducersfunction reducer (state, action) => state
Redux:three principles
Whyreducer?
Whyreducer?
var arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Whyreducer?
var arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
reducer
Changing toES2015 (ES6)
var arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Whyreducer?
const arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Whyreducer?
const arr = [1, 2, 3];
const sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Whyreducer?
const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => {
return acc + item;
}, 0);
console.log(sum); // 6
Whyreducer?
const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) =>
acc + item
, 0);
console.log(sum); // 6
Whyreducer?
const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => acc + item
, 0);
console.log(sum); // 6
Whyreducer?
const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 6
Whyreducer?
Anotherreducer example
Anotherreducer example
const arr = [1, 2, 3];
const state = arr.reduce((acc, item) => {
return acc.concat(item + 1);
}, []);
console.log(state); // [2, 3, 4]
Creating acounter
RULES
Creating acounter
action ‘INCREMENT’ => plus 1
Creating acounter
action ‘INCREMENT’ => plus 1
action ‘DECREMENT’ => minus 1
Creating acounter
action ‘INCREMENT’ => plus 1
action ‘DECREMENT’ => minus 1
action ‘UNKNOWN’ => previous state
Creating acounter
action ‘INCREMENT’ => plus 1
action ‘DECREMENT’ => minus 1
action ‘UNKNOWN’ => previous state
state undefined => initial state (0)
Creating acounter
1st step:adding redux
Creating acounter
npm i --save redux
Creating acounter
~5.9kb - minified~2kb - gzipped
https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js
Creating acounter
Redux methodcreateStore
createStore(reducer)
2nd step:creating the reducer
Creating acounter
Creating acounter
counter.js
const counter = (state, action) => {
return state;
}
Creating acounter
counter.js
const counter = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
}
}
Creating acounter
counter.js
const counter = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
}
}
Creating acounter
counter.js
const counter = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
}
return state;
}
Creating acounter
counter.js
const counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
}
return state;
}
How can I usethis reducer?
storemethods
getState()
storemethods
storemethods
import { createStore } from 'redux';
import counter from './reducers/counter';
const store = createStore(counter);
console.log(store.getState()); // 0
dispatch(action)
storemethods
storemethods
import { createStore } from 'redux';
import counter from './reducers/counter';
const store = createStore(counter);
console.log(store.getState()); // 0
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // 1
subscribe(listener)
storemethods
storemethodsimport { createStore } from 'redux';
import counter from './reducers/counter';
const store = createStore(counter);
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch({ type: 'INCREMENT' }); // 1
store.dispatch({ type: 'INCREMENT' }); // 2
store.dispatch({ type: 'DECREMENT' }); // 1
We have timefor a full demo?
Redux supportsmiddlewares
async stateredux-thunk
gaearon/redux-thunk
async stateredux-saga
yelouafi/redux-saga
http://redux.js.org
Think outsidethe box!Think outside
Fernando DaciukFullStack Engineer
Thanks!
/fdaciuk/talks npm install fdaciuk
