Manage the Flux of your web application: let's Redux |
Chi sono
Francesco Strazzullo
http://www.francescostrazzullo.info/
Chi sono
http://www.e-xtrategy.net/
Chi sono
http://www.cosenonjaviste.it/
http://www.blogzinga.it/
Chi sono
https://www.facebook.com/groups/developermarche/
React
React
" A JavaScript library for building user interfaces "
React
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="World" />, document.body);
Stato
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.render(<Timer />, document.body);
Stato
Stato
Flux
Flux
" Application Architecture For Building User Interfaces "
Why Not MVC?
Why Not MVC?
Why Not MVC?
Why Not MVC?
Flux
Action
Un evento scatenato nel sistema che ha lo scopo di modificarne lo stato
Dispatcher
Un Event Bus che fa girare gli eventi scatenati dalle Action all’interno dell’applicazione.
Store
Gli oggetti che contengono la business logic della vostra applicazione. Sono gli oggetti che in un classico MVC formerebbero la parte Model.
View
I componenti React
Flux
Why Flux?
Un unico modo di ragionare
Why Flux?
Complessità costante al crescere del progetto
Redux
Redux
Redux
" Redux is a predictable state container for JavaScript apps "
Why not Flux?
Verbosità
Why not Flux?
Un unico modo di ragionare?
Principi
" Single source of truth "
The state of your whole application is stored in an object tree inside a single store.
Principi
" State is read-only "
The only way to mutate the state is to emit an action, an object describing what happened.
Principi
" Mutations are written as pure functions "
To specify how the state tree is transformed by actions, you write pure reducers.
Elementi
Actions
import Dispatcher from "src/Dispatcher";
var add = function(text) {
Dispatcher.dispatch({
actionType: "addTodo",
text: text
});
};
var add = function(text) {
return {
actionType: "addTodo",
text: text
};
};
Flux
Redux
Elementi
Reducers
function addTodo(state,text){
var toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};
Elementi
Store + Dispatcher
import { createStore } from 'redux';
import Reducers from 'src/Reducers';
let store = createStore(Reducers);
Elementi
View
- Dumb components: non conoscono Redux
- Smart components: conoscono Redux
Redux
Why Redux?
Un unico modo di ragionare
Why Redux?
Stato serializzabile
Why Redux?
No side-effect
Why Redux?
Debito tecnico al minimo
That's It!
http://goo.gl/forms/9qhPaulS0N
That's It!
http://www.cosenonjaviste.it/react-tutorial/
http://www.cosenonjaviste.it/sviluppare-applicazioni-con-react-e-flux/
That's It!
f.strazzullo@e-xtrategy.net
@TheStrazz86