En esta publicación, tomaremos la librería de gestión de estado y le añadiremos una interfaz de usuario. Esto nos permitirá ver más de cerca cómo nuestra librería personalizada puede gestionar el estado en una aplicación real. Los cambios están regsitrado en el commit#87149115 del respositorio react-nanodegree.

UI

Tras crear un index.html que consume la gestión de estado de la biblioteca, añadamos la interfaz de usuario que representa esta lógica. Dado que nuestro proyecto tiene dos piezas de estado, necesitaremos dos áreas:

1. Área de la lista de tareas (Todo)
2. Área de objetivos (Goals)

Añadamos el marcado correspondiente para representar estas áreas.

UI + Estado

Ahora es el momento de reflejar los cambios de estado en nuestra interfaz de usuario. Para conseguir este resultado necesitamos escuchar cuándo se hace clic en los botones; lo haremos con el método addEventListener() del DOM:

document.getElementById('todoBtn').addEventListener('click', addTodo);
document.getElementById('goalBtn').addEventListener('click', addGoal);

Al presionar el botón #todoBtn se llamará a addTodo(), que añadirá el nuevo elemento al estado:

function addTodo () {
    const input = document.getElementById('todo');
    const name = input.value;

    input.value = '';

    store.dispatch(addTodoAction({
        name: name,
        complete: false,
        id: generateId()
    }));
}

Este método extraerá la información del campo de entrada, lo reiniciará y luego despachará un /Action Creator/ llamado addTodoAction con el texto que el usuario tecleó en el campo.

Así que estamos usando la interfaz de usuario para cambiar el estado de nuestro store, pero estos cambios no se están reflejando visualmente en la interfaz. Añadamos estos elementos en sus respectivas listas. Para lograrlo disponemos de algunas habilidades del DOM como:

• Acceder a elementos con document.getElementById()
• Añadir oyentes con .addEventListener()
• Acceder a la propiedad .value de un elemento
• Crear un nuevo elemento con .createElement()
• Añadir nuevo contenido con .appendChild()
• etc.

De esta manera conectamos nuestra aplicación con HTML y JavaScript puro con un estado funcional a una interfaz de usuario. Añadimos campos de formulario y botones a la UI que pueden usarse para agregar nuevas tareas y objetivos al estado. Actualizar el estado también provocará que toda la aplicación se re-renderice, de modo que la representación visual coincida con la información almacenada en el objeto de estado.

Esto es Redux

Hasta ahora, hemos usado nuestra propia implementación de gestión de estado. Pero todo lo que hemos hecho forma parte de la librería Redux. Vamos a dejar atrás nuestro código personalizado para usar la librería Redux real. Mientras trabajamos en este proyecto sencillo, enlazaremos la versión alojada de la librería Redux:

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>

Los puntos específicos de la transición son:

• Enlazar la librería Redux
• Eliminar la función createStore()
• Sustituir la llamada a createStore(app) por Redux.createStore(app)
• Reemplazar la función app() por Redux.combineReducers()

De este modo reemplazamos el código que la versión basada en HTLM y JavaScript puro por un código que consume la biblioteca Redux. Vimos que sustituir nuestro código por el de Redux no cambió nada en el funcionamiento de nuestra aplicación ni en cómo trabaja nuestro código específico. Redux es simplemente un contenedor de estado predecible.