Créer une TodoApp

Ce tutoriel est consacré à la création d'une application Todo simple. Il s'agit de pouvoir ajouter des éléments à une liste, de pouvoir les marquer comme fait ou deles supprimer.

Les étapes de la création d'une application sont les suivantes:

1. Création des constantes permettant de définir les nom des actions correspondant à une action provenant de la vue (par exemple, la création d'un nouvel item) ou du serveur (par exemple, la réception de données du serveur).
2. Création des actions. Chacune des action va répartir des données sur les store via le Dispatcher.
3. Création de la source des Todo. Permet de récupérer les données à partir d'une API. Dans le cadre de cet exemple, on se contentera de retourner des données statiques.
4. Création des modèles. Chaque modèle permet de définir comment sont stockées les données, le type et les contraintes de chaque champs.
5. Création des stores, permettant de gérer les données locales et d'envoyer des notifications de changement.
6. Création des composants visuels.

Étape 1: définition des constantes

Créez un fichier TodoConstants.js dans le dossier constants. Le but de ve fichier est de définir les noms des actions seveur/vue dont on pourrait avoir besoin.

import keyMirror from 'react/lib/keyMirror';

export default keyMirror({
    TODO_RECEIVE_DATA: null,
    TODO_CREATE: null,
    TODO_DESTROY: null,
    TODO_TOGGLE: null
});

Dans cet exemple, on a une action TODO_RECEIVE_DATA décrivant la réception par le store des données de l'application et trois actions TODO_CREATE, TODO_DESTROY, TODO_TOGGLE permettant respectivement de créer, supprimer et marquer un item comme fait.

Étape 2: création des actions

Dans cette étape, on définit des actions, i.e des méthodes permettant de répartir des données. Créez un fichier TodoActions.js dans le dossier actions.

import Dispatcher from '../core/dispatcher/Dispatcher'
import TodoConstants from '../constants/TodoConstants';

export default {
    // [...]

    create(text) {
        Dispatcher.handleViewAction({
            actionType: TodoConstants.TODO_CREATE,
            text: text
        });
    },

   // [...]
}

• On utilise la méthode handleViewAction() du Dispatcher pour signifier au Dispatcher que l'action provient de la vue.
• On précise le type de l'action dans le champs actionType. Ce champs doit prendre une valeur définie dans le fichier TodoConstants.

Maintenant que l'on a définit une action, on pourra l'utiliser là où c'est nécessaire. Pour lancer une action demandant de créer un item avec le texte Hello, World., il suffira de faire:

TodoActions.create('Hello, World.');

Attention, au point actuel, cela ne permet pas de créer un item. Il faudra encore définir la façon de gérer cette action dans le store TodoStore.

Étape 3: création de la source

Cette étape consiste à définir la façon dont les données sont récupérées. Chaque source implémente la méthode fetch() dont l'objectif est de renvoyer une action avec la dernière version des données.

Créez un fichier TodoSource.js dans le dossier sources:

import Source from '../core/sources/Source';
import TodoActions from '../actions/TodoActions';

class TodoSource extends Source {

    constructor() {
        super();
    }

    data() {
        return [{id: 1, text: 'Hello, World.', done: false}];
    }

    action(data) {
        TodoActions.receiveData(data);
    }

    fetch() {
      this.action(this.data());
    }
}

export default new TodoSource();

La classe TodoSource implémente les méthodes suivantes:

• data(): retourne les données statiques à mettre dans le store.
• action(): appelle l'action associée à la réception de données.
• fetch(): définit comment les données sont récupérées et envoyées via l'action associée à la réception de données. C'est la méthode qui est appelée à partir du store.

Étape 4: création du modèle.

Le but du modèle est d'encapsuler un objet dans une instance de classe offrant des fonctionnalités de validation de champs.

Créez un fichier Todo.js dans le dossier models:

import Model from '../core/models/Model';
import CharField from '../core/models/fields/CharField';
import BooleanField from '../core/models/fields/BooleanField';

class Todo extends Model {

    constructor(values) {
        super(values);
    }

    fields() {
        return {
            'text': new CharField(this.values['text'], {required: true, max_length: 10}),
            'done': new BooleanField(this.values['done'], {required: true})
        }
    }

}

export default Todo;

La méthode fields() retourne un tableau associatif permettant de définir comment les données sont stockées dans les champs du modèle, leurs types et leurs contraintes.

Étape 5: création du store.

Le but du store est de définir la gestion des actions reçues. Les actions sont gérées dans la méthode handle().

Créez une classe TodoStore.js dans le dossier stores et qui étend la classe GroupStore (permet de définir un store contenant une liste d'item de même type).

Définissez le type des éléments du groupe dans le constructeur:

   constructor(source) {
        super(source, Todo);
        this._errors = {};
    }

Cette classe doit également implémenter la méthode handle():

    handle(payload) {
        let action = payload.action;

        switch(action.actionType) {
            // [...]
            case Actions.TODO_CREATE:
                this.create(action.text);
                this.emitChange();
                break;
           // [...]
        }
    }

L'idée ici est, pour chaque type d'action, modifier l'état interne du store et émettre un changement pour notifier les observateurs que le store a mis à jour son état interne. Ici, la méthode create() est une méthode interne de la classe TodoStore qui sert à définir la façon dont le store est modifié. Elle crée un nouvel item avec le texte text ou bien met à jour les erreurs this._errors si ce n'est pas le cas.

Étape 6: création des composants

On ne détaillera pas comment créer un composant React, car ce n'est pas l'objet de ce tutoriel. Pour cela, vous pouvez lire le tutoriel officiel à l'adresse suivante:

Tutoriel React de Facebook

Le composant principal Todos, possède un champs todos dans son état qu'on met à jour à l'aide de la méthode getAll() du TodoStore. Il possède également un méthode _onChange() qui définit ce qui est réalisé lorsque le store est mis à jour. Lorsque le composant est monté, la méthode componentDidMount() est appelée. C'est dans cette méthode qu'on dit la méthode _onChange() doit être appelée lorsque le store est mis à jour en utilisant la méthode addChangeListener() du store.

Les actions, définies dans TodoActions sont déclenchées dans les méthodes privées du composants, qui sont appelées lorsqu'un événement associé au composant est appelé.

Pour plus de détails, lisez le code de l'exemple dans le dossier components du dépôt, ça devrait être assez clair si vous êtes familier avec React.