Categorías
Desarrollo web General Temporada 2

SleepTracker 0.1-a

Siguiendo con la idea de trabajar en mini-proyectos, hace unas semanas comencé a crear una aplicación web que fuera capaz de hacer un seguimiento de las horas de sueño.

Aquí la complejidad vendría de la mano de tener que desarrollar el stack completo:

Arquitectura

En la parte del servidor he creado un pequeño server con NodeJS y Express que monta una API sencilla sobre la que realizar las consultas.

Los datos están almacenados en una base de datos MongoDB que almacena todas las entradas, tanto las completadas como las que no.

Decidí que fuera la lógica del cliente la que decidiera qué valores mostrar.

La parte del front-end la estoy haciendo con una aplicación simple en React organizada por componentes con la lógica y las consultas extraídas de ella para manejarlas de forma más sencilla.

Diseño frontend

Ahora queda la parte más visual y la de tratamiento de datos.

Una vez comprobadas las conexiones y viendo que la aplicación web es capaz de obtener todos los datos del servidor he empezado a trabajar con ReCharts (https://recharts.org/en-US) para la presentación gráfica.

Lo cierto es que, por ahora, la forma de mostrar las gráficas está siendo bastante sencilla, pero me estoy empezando a encontrar problemas a la hora de personalizar bien los estilos.

Siguientes pasos

Voy a intentar perfilar un poco mejor la presentación gráfica, adecuando los estilos al diseño de la página y terminaré de añadir algunos de los componentes restantes.

Una vez que haya terminado la parte más visual, prepararé el diseño de la inserción de datos, que ha de dividirse en dos partes:

  • Nueva entrada: En el momento de ir a dormir, para marcar el inicio del tiempo.
  • Cierre de entrada: En el momento de despertarse, para marcar el fin del tiempo.

Esto se hará desde un acceso paralelo y mucho más simple para que se puede hacer de forma rápida desde el teléfono móvil.

Categorías
Temporada 0

Log 0.3

Objetivos:

  • Traslado de Hooks a Redux
  • Interfaz

Migrando un proyecto a Redux

Pese a que no creo que utilice en mis proyectos la solución de Redux, el curso me ha venido bien para entender su concepto.

Uno de los problemas que puede presentar trabajar con Hooks en React es que la información suele viajar en un único sentido: de los componentes padre a los componentes hijo.

Existen alternativas para resolver esta unidireccionalidad, pero originalmente este mecanismo no estaba pensado para ir en otra dirección.

Así, cuando queremos emplear un valor en distintas partes de nuestra aplicación de forma generalizada, trabajar con Hooks puede resultar engorroso.

Redux es, simplificándolo, un gestor de variables globales que puede accederse desde cualquier punto de tu aplicación.

La forma de acceder a lo que se conoce por Store se hace en dos fases: Primero definimos la store en el nivel más alto de nuestra aplicación:

//..
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App ></App>
  </Provider>,
  document.getElementById('root')
)

De esta forma, la store está disponible en toda nuestra aplicación, siendo tan sencillo acceder a ella como:

//..
import { useDispatch, useSelector } from 'react-redux'

const users = useSelector(state => state.persons)
const dispatch = useDispatch()

En el primer caso, useSelector nos extrae la información de la store (en este caso el objeto ‘persons’).

En el segundo, creamos una variable dispatch que va a ser la encargada de lanzar los que son conocidos como «reducers», funciones que permiten acceder al contenido de la store para modificarlo:

import userService from '../services/users.js'


const personsReducer = (state = [], action) => {
  switch(action.type){
    case 'SET_PERSONS': {
      return action.data
    }
    default:
      return state
  }

}


export const setPersons = () => {
  return async dispatch => {
    const persons = await userService.getAll()
    dispatch({
      type: 'SET_PERSONS',
      data: persons
    })
  }
}

export default personsReducer

Este es un ejemplo básico de reducer, en el que ya incluimos el método para acceder a él y lo exportamos directamente. De esta forma podemos usar dispatch llamando directamente al método del reducer y dejar que éste se encargue de toda la lógica: tanto la de la store de redux como la de la base de datos.

La migración ha sido sencilla en general, aunque tienes que cambiar un poco la perspectiva cuando pasas de Hooks a Redux porque ni funcionan igual ni se usan para lo mismo.