Tutorial React + Flux + RxJS 22 Sep 2016
This is a very basic tutorial about React using the Flux architecture and RxJS. Let’s dive in !
Here is what we are going to build :
The code can be found on Github here. Feel free to fork it :)
It is composed of 3 React components, a form to create a task, a task list and a badge in the header showing the number of tasks.
Let’s start by the dispatcher. It is really simple if you know a little bit RxJS. If not you could see this as a kind of
eventBus. The dispatch method will send an event on the bus
Subscribers will be called if the action type correspond to the
type parameter passed in the subscription. To do that we use the filter method that will give us a new kind of eventbus (observable) containing only the event of the right type. The subscriber can then subscribe to this new eventbus. Note that to keep the tutorial simple we did not implement any dispose/unregister mechanism.
The form is responsible for creating the tasks. The form is composed of a text field and a submit button. My form is listening for the
onSubmit thanks to the props. Here is my render method.
Now let’s have a look at the
handleSubmit method. Note the
action of type
CREATE_TASK thanks to a dispatcher that was passed with the props
this.props.dispatcher.dispatch(action);. Finally we clear the textfield by using the setState method
We add the form to the dom using ReactDOM and passing the dispatcher.
The task store
To save our tasks we need a store. As my implementation is really basic it does need too much explanations. I create a function to build my taskStore. My store should be able to listen to actions and update its internal state as a consequence. This is done using the dispatcher subscribe method
dispatcher.subscribe();. It means the store will listen to
DELETE_TASK events and trigger the appropriate method for each case.
Now the task list should display all our tasks. To do so, our task list will listen to a
TASK_STORE_UPDATED event sent by the store. Noet that we could have implemented this differently registering a callback to the taskstore directly inside the view. I prefer this implementation so that the task list does not know about the taskstore. The only dependency is on the dispatcher. This could be problematic though if stores start calling themselves, but this is out of the scope of this tutorial.
My task list will be composed of a list of taskNode
We will build the list of task nodes using the map function on the
state.tasks that will create a new array filled with React elements. Each node is just a div containing the text of the task and a button to delete it.
The state.tasks is updated by listening to the
TASK_STORE_UPDATED event. We subscribe to this event after the
componentDidMount. We then simply call the
setState method to re-render the view everytime we receive the
TASK_STORE_UPDATED event. Note that React is smart and will only update the part of the dom that has changed, which is why React it is so efficient.
To delete the task we just need to dispatch a
DELETE_TASK action as shown a little bit above, simply using
The badge is very very simple. It is simply a div with a number inside
It reacts to the same event
TASK_STORE_UPDATED as the task list view to be resfreshed.
Feel free to comment ! Hope this will be useful.