Now lets use Relacx in an application. We will be building a simple Todo App to demonstrate the use of all features in Relacx.

Before we dive into the code, lets have get an understanding of what we are going to build.

We are building a simple Todo App, with the following feautures :

1. our app will contain an area to input some text to be saved as a todo.
2. The saved todo's will be listed one after another.
3. There will be a cross/delete button against each todo item.
4. A notification should should come up after every save and delete.

This is how the app looks, try adding some todo's

The application consists of 5 React component :

1. TodoApp - the root container
2. AddTodo - for getting todo input
3. TodoList - for maintaining list of todo's
4. TodoItem - for maintaining each todo item
5. TodoNotification - for showing notifications

Excluding TodoApp, the 4 other components have a controller.
Here is an overview of all the components and their controllers.

Component Controller Actions BroadcastActions Action Listeners
AddTodo AddTodoController add, changeAction, onkeyPress TODO_ADDED TODO_ADDED
TodoList TodoListController none none TODO_ADDED, TODO_DELETED
TodoItem ToDoItemController delete none none
TodoNotification TodoNotificationController none none TODO_ADDED, TODO_DELETED, REMOVE_NOTIFICATION

Note that the ToDoItemController does not have a broadcast action named "TODO_DELETED", it just has an action named "delete" and inside that action Relacx.broadcastAction is used.
This is just done for demonstration purposes to show the use of Relacx.broadcastAction, doing this by adding a broadcastAction would also work.