State in React Apps
Never use state. Always use props.
Callbacks?
var state = {
eventId: 1000,
eventName: "2015 Governor's Gala",
tables: {
...
}
};
function setEventName(name) {
state.eventName = name;
};
React.render(
<App
state={state}
setEventName={setEventName}/>,
document.getElementById("app")
);Attach a Model
I can't write this one simply.Flux
var Store extends EventEmitter = {
eventId: 1000,
eventName: "2015 Governor's Gala",
tables: {...},
setState: function() {
this.emit("change", this);
}};
var actions = {
updateEventName: function(payload){...},
addTable: function(payload){...}};
var store = new Store();
store.on("change", function(state) {
React.render(
<App
state={state}
actions={actions}/>,
document.getElementById("app");};What does flux provide?
- Simple data flow
- A scaffold to deal with lots of state
- Sharing state across component solved
But which flux?
-
ReFlux
-
Flummox
-
Fluxxor
-
Flux This
-
Material Flux
-
Fluxible
-
Fluxy
-
Alt
-
Delorean
-
MartyJS
-
McFly
-
Lux
-
omniscientjs
Which is well supported?
-
ReFlux
-
Flummox
-
Fluxxor
-
Flux This
-
Material Flux -
Fluxible
-
Fluxy
-
Alt
-
Delorean
-
MartyJS
-
McFly
-
Lux
-
omniscientjs
Which is well supported?
-
ReFlux
-
Flummox
-
Fluxxor
-
Flux This
-
Material Flux -
Fluxible
-
Fluxy
-
Alt
-
Delorean
-
MartyJS
-
McFly(biffy fork) -
Lux
-
omniscientjs
Which has a dispatcher (but doesn't make you write consts)?
-
ReFlux -
Flummox
-
Fluxxor -
Flux This
-
Material Flux -
Fluxible -
Fluxy
-
Alt
-
Delorean
-
MartyJS -
McFly(biffy fork) -
Lux -
omniscientjs
Which is (really) well supported?
-
ReFlux -
Flummox
-
Fluxxor -
Flux This -
Material Flux -
Fluxible -
Fluxy
-
Alt
-
Delorean -
MartyJS -
McFly(biffy fork) -
Lux -
omniscientjs
Which is Fast?

Which is (really) Fast?

Non-Flux Alternatives?
- Functional Reactive Programming Libraries
- Relay/GraphQL
- Omniscient
Questions?
State in React
By rickyvetter
State in React
- 568