Adventures in React: Flux vs Redux

After developing simple applications with React I started to think of the things I would require to do in order to develop an application using this technology on a more real world scenario.

Then the research started, and as I expected, a lot of options are available, being the most famous an architectural pattern called Flux which was pretty good indeed,The general idea and the ‘marketing’ against MVC had some interesting points of view from the perspective of the guys at Facebook.


Flux Logo by Facebook

I started to play with it, and I liked the general workflow of development with Flux.

You first start to create actions, which you can raise it through a Javascript object called dispatcher will be responsable to pass this action and its data to all of the stores associated to it which are like controllers that with react on an action in specific.

An action is practically a Javascript object with a property called actionType which will be passed to all the stores in order to see which of them can process the action that was raised:

1
2
3
4
5
6
7
8
9
createCourse: function(course) {
var newCourse = CourseApi.saveCourse(course);
//Hey dispatcher, go tell all the stores that an author was just created.
Dispatcher.dispatch({
actionType: ActionTypes.CREATE_COURSE,
course: newCourse
});
},

As you may see, its a simple function that Im able to call inside a React Component and bind it to some HTML event.

Then we have our stores, which will the pieces that the data retrieval and manipulation will be take care of:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Dispatcher.register(function(action) {
switch(action.actionType) {
case ActionTypes.INITIALIZE:
_courses = action.initialData.courses;
CourseStore.emitChange();
break;
case ActionTypes.CREATE_AUTHOR:
_courses.push(action.course);
CourseStore.emitChange();
break;
case ActionTypes.UPDATE_AUTHOR:
var existingCourse = _.find(_courses, {id: action.course.id});
var existingCourseIndex = _.indexOf(_courses, existingCourse);
_courses.splice(existingCourseIndex, 1, action.course);
CourseStore.emitChange();
break;
case ActionTypes.DELETE_AUTHOR:
_.remove(_courses, function(course) {
return action.id === course.id;
});
CourseStore.emitChange();
break;
default:
// no op
}

Here I handle four different types of logic depending on the action that is being received. Notice that there is some emitChange function that comes from Node’s EventEmmiter which is declared before the registration process:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
"use strict";
var Dispatcher = require('../dispatcher/appDispatcher');
var ActionTypes = require('../constants/actionTypes');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var _ = require('lodash');
var CHANGE_EVENT = 'change';
var _courses = [];
var CourseStore = assign({}, EventEmitter.prototype, {
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
},
emitChange: function() {
this.emit(CHANGE_EVENT);
},
getAllCourses: function() {
return _courses;
},
getCourseById: function(id) {
return _.find(_courses, {id: id});
}
});

Great! Now in our component we just simply raise the action and we are practically done in the Flux process:
1
2
3
4
5
6
7
8
9
10
11
12
saveCourse: function (event) {
event.preventDefault();
if (!this.courseFormIsValid()) {
return;
}
if (this.state.course.id) {
CourseActions.updateCourse(this.state.course);
} else {
CourseActions.createCourse(this.state.course);
}

 

And thats all! Next post we will get our hands dirty on Redux! so stay tuned!

 

 

Share