kyoto.js 13

1. Reflux
Kyoto.js vol. 13
2017.7.30

2. • (Twitter@kamiyam)
•
• Engineer
•

3. RefluxJS

4. is

5. Reflux is

6. is

7. Ref. https://github.com/reflux/refluxjs#overview

9. 1.creating actions
2.creating stores
3.hooking stores to React components
Ref. https://github.com/reflux/refluxjs#usage

10. creating actions.

11. Implements Action
var Actions = Reflux.createActions([
"statusUpdate",
"statusEdited",
"statusAdded"
]);
// Actions object now contains the actions
// with the names given in the array above
// that may be invoked as usual
Actions.statusUpdate();

12. creating stores.

13. Manually Listenable Store
class StatusStore extends Reflux.Store
{
constructor()
{
super();
this.state = {flag:’OFFLINE’};
// <- set store's default state much like in React
this.listenTo(statusUpdate, this.onStatusUpdate);
// listen to the statusUpdate action
}
onStatusUpdate(status)
{
var newFlag = status ? 'ONLINE' : 'OFFLINE';
this.setState({flag:newFlag});
}
}

14. var Actions = Reflux.createActions([
‘firstAction’,
‘secondAction’
]);
class StatusStore extends Reflux.Store
{
constructor()
{
super();
this.listenables = Actions;
}
onFirstAction()
{
// calls on Actions.firstAction();
}
onSecondAction()
{
// calls on Actions.secondAction();
Auto Listenable Store

15. hooking stores to
React components.

16. Set simple Store
class MyComponent extends Reflux.Component
{
constructor(props)
{
super(props);
this.state = {};
// our store will add its own state to the
component's
this.store = StatusStore;
// <- just assign the store class itself
}
render()
{
var flag = this.state.flag; // <- flag is mixed in
from the StatusStore
return <div>User is {flag}</div>
}
}

17. Set multiple Stores
class MyComponent extends Reflux.Component
{
constructor(props)
{
super(props);
this.state = {type:’admin'};
// <- note that we can still use normal state
this.stores = [StatusStore, AnotherStore];
this.storeKeys = ['flag', 'info'];
}
render()
{
var flag = this.state.flag;
var info = this.state.info;
var type = this.state.type;
return <div>User is {flag}, info: {info}, type:
{type}</div>
}
}

18. Did not work
componentWillReceiveProps?

19. Manually Set State
class MyComponent extends Reflux.Component
{
constructor(props)
{
super(props);
this.mapStoreToState(MyStoreClass, function(fromStore){
var obj = {};
if (fromStore.color)
obj.color = fromStore.color;
if (fromStore.data && fromStore.data.classToUse)
obj.class = fromStore.data.classToUse;
return obj;
});
}
render()
{
return <p className={this.state.class}>The color is:
{this.state.color}</p>;
}
}

20. Examples

21. Simple Fully Functioning Example
var Actions = Reflux.createActions([
'increment',
'decrement',
'changeBy'
]);

22. Simple Fully Functioning Example
class CounterStore extends Reflux.Store
{
constructor()
{
super();
this.state = {count: 0};
this.listenables = Actions;
}
onIncrement()
{
this.setState({count: this.state.count+1});
}
onDecrement()
{
this.setState({count: this.state.count-1});
}
onChangeBy(amount)
{
this.setState({count: this.state.count+amount});
}
}

23. Simple Fully Functioning Example
class Counter extends Reflux.Component
{
constructor(props)
{
super(props);
this.store = CounterStore;
}
render()
{
return <div>{this.state.count}</div>;
}
}

24. Simple Fully Functioning Example
ReactDOM.render
(
<Counter/>,
document.querySelector('#react-root')
);
setInterval(Actions.increment, 1000);

25. DEMO