Flux and ReactJS

An introduction to Flux and how to integrate ReactJS into it.

Transcript

1. flux Rei Colina @reinaldo_13 &react
2. Why?
3. ?
4. Model Model Model Model Model Model Model Model
5. Flux!
6. - What is it? - Anatomy - Action - Dispatcher - Store - View - The Big Picture - Libraries - Demo - Pros & Cons
7. What is Flux?
8. framework
9. library
10. Action Dispatcher Store View architectural pattern
11. Actions Dispatcher Stores Unidirectional Flow
12. Anatomy of Flux
13. Action Dispatcher Store View Application Structure
14. Action Dispatcher Store View { actionType: ‘create’, data: data } function(data) { appDispatcher.dispatch( ); }
15. Action Dispatcher Store View var TodoActions = { create: function(text) { AppDispatcher.dispatch({ actionType: TodoConstants.TODO_CREATE, text: text }); }, updateText: function(id, text) { AppDispatcher.dispatch({ actionType: TodoConstants.TODO_UPDATE_TEXT, id: id, text: text }); } };
16. Action Dispatcher Store View .register(function callback) .dispatch(object action)
17. Action Dispatcher Store View var Dispatcher = require(‘flux’).Dispatcher; module.exports = new Dispatcher();
18. - App state (private vars) - No setters; only getters - Callbacks - Emits events on state change Action Dispatcher Store View
19. Action Dispatcher Store View var _todos = {};
20. Action Dispatcher Store View var TodoStore = assign({}, EventEmitter.prototype, { getAll: function() { return _todos; }, emitChange: function() { this.emit(CHANGE_EVENT); }, addChangeListener: function(callback) { this.on(CHANGE_EVENT, callback); }, removeChangeListener: function(callback) { this.removeListener(CHANGE_EVENT, callback); } });
21. Action Dispatcher Store View AppDispatcher.register(function(action) { switch(action.actionType) { case TodoConstants.TODO_CREATE: create(action.text); TodoStore.emitChange(); break; case TodoConstants.TODO_UPDATE_TEXT: update(action.id, {text: action.text}); TodoStore.emitChange(); break; default: // no op } });
22. Action Dispatcher Store View var CHANGE_EVENT = 'change'; var _todos = {}; function create(text) { ... } function update(id, updates) { ... } var TodoStore = assign({}, EventEmitter.prototype, { getAll: function() { return _todos; }, emitChange: function() { this.emit(CHANGE_EVENT); }, addChangeListener: function(callback) { this.on(CHANGE_EVENT, callback); }, removeChangeListener: function(callback) { this.removeListener(CHANGE_EVENT, callback); } }); AppDispatcher.register(function(action) { switch(action.actionType) { case TodoConstants.TODO_CREATE: create(action.text); TodoStore.emitChange(); break; case TodoConstants.TODO_COMPLETE: update(action.id, {complete: true}); break; case TodoConstants.TODO_UPDATE_TEXT: update(action.id, {text: action.text}); TodoStore.emitChange(); break; default: // no op } }); module.exports = TodoStore;
23. - ReactJS Action Dispatcher Store View - Virtual DOM - Composability - Predictable
24. Action Dispatcher Store View componentDidMount: function() { // add an event listener TodoStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { // remove the event listener TodoStore.removeChangeListener(this._onChange); }
25. Action Dispatcher Store View getInitialState: function() { // get data from the store return { allTodos: TodoStore.getAll() }; }
26. Action Dispatcher Store View _onSave: function(text) { // change data in the store TodoActions.updateText(id, text); }
27. Action Dispatcher Store View var TodoApp = React.createClass({ _onChange: function() { this.setState({ allTodos: TodoStore.getAll() }); }, _onSave: function(text) { TodoActions.updateText(id, text); } getInitialState: function() { return getTodoState(); }, componentDidMount: function() { TodoStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { TodoStore.removeChangeListener(this._onChange); }, render: function() { return (<div> ... </div>); }, }); module.exports = TodoApp;
28. put it all together
29. The Flow Dispatcher Action Creators Store State View View Controller View props props event Web Service
30. AJAX API Calls var _todos = {}; AppDispatcher.register(function(action) { switch(action.actionType) { case Constants.FETCH_TODOS: $.ajax({ url: '/todos/', success: function (data) { // update _todos } }); break; } }); From Stores Action Dispatcher Store View
31. AJAX API Calls var TodoActions = { fetchTodos: function(text) { $.ajax({ url: '/todos/', success: function (data) { // dispatch an action } }); } }; From Actions Action Dispatcher Store View
32. The Flow Dispatcher Action Creators Store State View View Controller View props props event Web Service
33. libraries
34. Implementation Libraries Flux Utils: https://github.com/facebook/flux Action Dispatcher View Store Store Store
35. Implementation Libraries Flummox: https://github.com/acdlite/flummox Action View Store Store Store
36. Implementation Libraries Redux: https://github.com/rackt/redux Action Store View
37. the power of flux
39. framework
40. library
41. Action Dispatcher Store View architectural pattern
43. - Data is easy to follow - Stores as source of truth - Testable - Boilerplate code - Easy to fall into anti-patterns
44. {eof} @reinaldo_13