Flux Pattern Design Node.js React Parte 2

Continuando con el ejercicio, solo falta dar funcionalidad a la edición de las tareas y las nuevas tareas

4.- Agregar la funcionalidad de editar las tareas con doble click.
    - Crear TodoEditStore que dará seguimiento al ID del TODO que será editado.
    - Crear las acciones startEditingTodo, stopEditingTodo.
    - Crear la acción de editTodo.
    - Creat el componente de vista TodoEdit, y darle funcionalidad.

TodoEditStore.js básicamente hará el seguimiento del id del todo que se está editando en el momento, y deacuerdo a las acciones startEditingTodo y stopEditingTodo actualizara el state denominado editing que indica si se esta editando alguna tarea en el momento, Este es usado en la Vista en el componente TodoItem.

   class TodoEditStore extends ReduceStore {
    constructor() {
        super(TodoDispatcher);
    }

    getInitialState() {
        return '';
    }

    reduce(state, action) {
        switch(action.type){
            case TodoActionTypes.START_EDITING_TODO:
                return action.id;

            case TodoActionTypes.STOP_EDITING_TODO:
                return '';

            default:
                return state;
        }
    }
}

export default new TodoEditStore();

En appContainer.js tenemos los Stores, y los States, vemos los States todo, editing, y draft. el todo es un map de tareas, el editing, tiene el ID del todo que se esta editando, y tiene '' cuando no se esta editando. del draft state esta orientado hacia el texto que se esta editando y es usado en AppView con el componente NewTodo. draft state es administado por TodoDraftStore.js, básicamente obedece a dos acciones ADD_TODO, que limpia el contenido por ser nuevo, y UPDATE_DRAFT que asigna al state draft el valor del texto de entrada.

function getStores() {
    return [
        TodoEditStore,
        TodoDraftStore,
        TodoStore,
    ];
}

function getState() {
    return {
        draft: TodoDraftStore.getState(),
        editing: TodoEditStore.getState(),
        todos: TodoStore.getState(),

        onAdd: TodoActions.addTodo,
        onDeleteTodo: TodoActions.deleteTodo,
        onDeleteCompletedTodos: TodoActions.deleteCompletedTodos,
        onEditTodo: TodoActions.editTodo,
        onStartEditingTodo: TodoActions.startEditingTodo,
        onStopEditingTodo: TodoActions.stopEditingTodo,
        onToggleTodo: TodoActions.toggleTodo,
        onToggleAllTodos: TodoActions.toggleAllTodos,
        onUpdateDraft:  TodoActions.updateDraft,
    };

Un mayor cambio se hace a AppView.js, ya que se reacomodan los componentes NewTodo y EditItem.

Finalmente después de hacer algunos debugs con console.log resolviendo algunos errores de nombre que no detecto javascript, concretamente TodoDispatch.UPDATE_DRAFT cuando debiera ser TodoActionTypes.UPDATE_DRAFT. Habrá que buscar una herramienta que nos ayude a debugear flux como es el caso de React Developer Tools que es un plugin para el Browser.

listo.

Para debugear aplicaciones flux, hay este enlace http://alt.js.org/
https://www.youtube.com/watch?v=LUksOCuRjkE