Manage the Flux of your web application: let's Redux |
Francesco Strazzullo
http://www.francescostrazzullo.info/
http://www.e-xtrategy.net/
http://www.cosenonjaviste.it/
http://www.blogzinga.it/
https://www.facebook.com/groups/developermarche/
" A JavaScript library for building user interfaces "
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="World" />, document.body);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);" Application Architecture For Building User Interfaces "
" Redux is a predictable state container for JavaScript apps "
" Single source of truth "
The state of your whole application is stored in an object tree inside a single store.
" State is read-only "
The only way to mutate the state is to emit an action, an object describing what happened.
" Mutations are written as pure functions "
To specify how the state tree is transformed by actions, you write pure reducers.
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
function addTodo(state,text){
var toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};
import { createStore } from 'redux';
import Reducers from 'src/Reducers';
let store = createStore(Reducers);http://goo.gl/forms/9qhPaulS0N
http://www.cosenonjaviste.it/react-tutorial/
http://www.cosenonjaviste.it/sviluppare-applicazioni-con-react-e-flux/
f.strazzullo@e-xtrategy.net
@TheStrazz86
By Francesco Strazzullo
