Reflux is a library for implementing unidirectional data flow architectures for React applications. It allows for creating actions that trigger stores to update, and hooking stores to React components so their state propagates as props. Examples demonstrate creating actions and stores, and connecting a store to a component to display its state. Reflux supports both manual and automatic listening to stores from components.

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