En este artículo, concluiremos nuestra seria de artículos sobre Redux destacando algunos aspectos que nos serán de utilidad en próximos proyectos con esta librería.
También destacaremos otros detalles del proyecto que hemos estado trabajando pero que no hemos tenido tiempo de profundizar y con los que podremos cerrar nuestro proyecto de la manera correcta.

Si te perdiste el artículo anterior, estuvimos viendo como conectar Redux con nuestro CRUD hecho en ReactJS y en NextJS.

Repetición de acciones para post y update

Seguro, que si estuviste bastante pendiente del desarrollo del CRUD, recordarás que el endpoint para actualizar el post y crear uno nuevo es el mismo.

El motivo por el que, decidí crear acciones diferentes para ellos es que en el estado, al actualizar el post este se actualiza en state.currentPost pero cuando creas uno nuevo se añade en state.posts.

Si estuviste trabajando la API que realizamos para el CRUD recordarás que fue allí donde trabajamos un endpoint único y diferenciamos un tipo de petición de otra.

Conectando Redux con proyectos en React y no en NextJS

Como recuerdas, usamos un wrapper llamado next-redux-wrapper para los componentes que son páginas. En el caso de que estés trabajando puramente con ReactJS no necesitarás este wrapper.

Para trabajar únicamente con React, asumiendo que estás gestionando tus rutas con React Router, en el archivo donde tengas definidas las rutas tendrás que importar el componente Provider así como el store y que este componente encapsule todas las rutas de tu aplicación.

Si quieres saber más sobre React Router, tienes a tu disposición la documentación oficial, aunque esta se encuentra en inglés.

Aquí puedes ver un ejemplo similar a cómo debería de quedarte la mencionada implementación:

import React from 'react'
import { render } from 'react-dom'
import store from './store'
import App from './components/App'

class Router extends React.Component {
  render() {
    <Provider store={store}>
      <Router>
        <Route path="/" component={App} />
      </Router>
    </Provider>
  }
}

export default Router

Extendiendo Redux: ImmutableJS

Si deseas trabajar un poco más el tema del estado con JavaScript, te recomiendo añadirle a la implementación con la que estamos trabajando ImmutableJS.

ImmutableJS es una librería creada por Facebook, que no necesariamente necesita trabajar junto con React y/o Redux ya que su función es trabajar con estructuras de datos inmutables.

La librería, como comentaba, se encarga de trabajar con colecciones de datos cuya principal característica es la inmutabilidad, lo que significan que una vez que son creadas no se pueden modificar. A pesar de ello, la librería implementa métodos para modificar estas colecciones pero en realidad, lo que está sucediendo es que se está creando un nuevo objeto con los cambios correspondientes.

Este tipo de patrones para datos, como cualquier otro tiene algunas ventajas, entre las que encontramos:

  • [ ] El tiempo de lectura y escritura de los datos es reducido considerablemente con respecto a el uso de Object.assign()
  • [ ] Al no sobreescribirse los datos, si no crearse nuevas estructuras es más sencillo retornar a estructuras anteriores.
  • [ ] Los cambios en las estructuras de datos quedan realizados de una manera más clara, que es una ventaja significante si trabajas en equipo.

A pesar de todo esto, encontramos también algunas desventajas como son:

  • [ ] La complejidad que este tipo de estructuras puede llegar a suponer y la dificultad de ponerlas en práctica en un equipo.
  • [ ] Los tiempos de respuesta mencionados pueden no ser tan beneficiosos si los datos son pequeños, por lo que en ese caso pueden prevalecer las estructuras de datos mutables.

Entre mis proyectos desarrollé uno con React y Redux en el que implementé ImmutableJS. Así que si te has decidido a trabajar con ella, te dejo el proyecto como apoyo para que te sea más fácil comenzar con la librería.

Si deseas consultar la documentación de ImmutableJS(en inglés), haz click aquí

Alternativa a Redux: Flux

Flux es otra librería creada por Facebook que puede ser de uso para trabajar con el estado si deseas trabajar con una librería más pequeña. Se caracteriza por su one-way data binding es decir, que en un esquema, los datos van en una sola dirección.


Imagen propiedad de Smashing Magazine

Entre sus diferencias con respecto a Redux encontramos:

  • [ ] Tenemos la posibilidad de crear múltiples store
  • [ ] Los componentes de React se conectan a store directamente en vez de usar connect()
  • [ ] Más intermediarios que al trabajar con Redux

Documentación de Redux

Otro recurso bastante importante para continuar tu aprendizaje con Redux es sin duda la documentación. Afortunadamente para los desarrolladores hispanohablantes está disponible en nuestro idioma, para que no tenga que ser un doble problema el trabajar con Redux, si no todo ventajas.

Accede a la documentación de Redux

En la documentación podrás ver conceptos como los que hemos explicado aquí, recetas(ejemplos de proyectos en los que aplicar Redux), preguntas frecuentes e incluso la posibilidad de consultar directamente los métodos del API de Redux.

Código de la aplicación actualizado

Si estuviste siguiendo los artículos del CRUD recordarás que teníamos tanto un repositorio en Github como una versión en la nube de la aplicación. Desde ahora, tanto el repositorio de Github como la parte del FrontEnd del CRUD tienen los cambios que se han realizado en esta serie de artículos:

Visita el repositorio de GitHub
Visita la versión web del CRUD

Conclusiones finales

Para finalizar este compendio de artículo sobre Redux me gustaría invitarte a que dejaras un comentario en el sistema de discusiones sobre tu pregunta relacionada con Redux o con cualquier aspecto que hayamos ido mencionando en los diferentes artículos.

También, en tu comentario agradecería sugerencias sobre como ampliar el contenido de JavaScript que hay en el blog actualmente.

Finalmente, te dejo la recomendación de que tomes el Curso de ReactJS de OpenWebinars pues como podrás ver en el temario se ven algunos conceptos sobre Redux e ImmutableJS de los que hemos estado hablando durante todo este tiempo.