Qué es Redux: Conceptos esenciales
Redux es una librería de JavaScript que nos ayuda a organizar los datos de nuestra aplicación y a estructurar todo lo que está relacionado de una forma muy sencilla.
En esta ocasión y durante los pasos de los siguientes artículos, vamos a aplicar todos los conocimientos que te voy a ir mostrando sobre Redux y a plasmarlos en un proyecto en el que estuvimos trabajando anteriormente, el CRUD que hicimos en JavaScript.
Recientemente se publicó la segunda parte del CRUD, que puedes ver por aquí.
Algunos conceptos y cómo están relacionados entre sí
El state es el concepto más importante de Redux. Constituye la totalidad de la información de la que dispone nuestra aplicación. En nuestro caso serían todos los posts y el post individual que estemos visualizando.
En Redux tenemos además diferentes conceptos con los que tenemos que ir trabajando:
- Las acciones, que nos ayudarán a definir los cambios que se van a producir en el state.
- Los reducers, que responderán de las llamadas de las acciones y cambiarán el estado en base a la información de la acción y como nosotros definamos.
- El store, que es el lugar en el que se almacena la información.
La información pasa por diferentes fases, atendiendo al siguiente esquema:
Comenzando a trabajar con Redux
Lo primero de lo que nos vamos a encargar es de escribir el archivo principal de Redux, que es el que crea el store.
¡Importante! Si no seguiste los artículos del CRUD y deseas descargarte el proyecto desde ese punto haz click aquí
Por otra parte, antes de comenzar será necesario que añadamos algunos paquetes a el proyecto, para ello en la terminal escribiremos:
$ yarn install redux redux-thunk redux-promise redux-devtools-extension
Una vez tengamos todos los módulos que vamos a usar en esta ocasión instalados, crearemos en la raíz el archivo store.js.
En este, tendremos que incluir:
Middlewares
Estos son redux-promise y redux-thunk. Sirven para usar promesas en las acciones y para crear acciones asíncronas respectivamente pero para registrarlos deberemos de hacerlos constar en el store.
Estos, como cualquier otro middleware se encarga de mediar entre nuestro código y la librería y nos permiten salirnos del formato habitual, como en el caso de redux-promise o de añadirle features nuevos a la librería como en el caso de redux-thunk.
Redux Devtools
El módulo redux-devtools-extension nos ayudará a filtrar todo lo que pase por el store y así poder verlo desde la consola de desarrolladores de Redux que te recomiendo instalar.
La consola de desarrolladores de Redux te mostrará la totalidad de las acciones a las que se van llamando en tu aplicación, y, por cada acción podrás comparar el estado actual con el anterior en diferentes formas. Incluso podrás despachar las acciones desde la propia consola.
Debes de tener en cuenta que tendrás que eliminar esto para producción o crear estructuras
ifpara evitar que se habiliten los devtools en un ambiente que no sea el de desarrollo. Aunque no va a ser lo común, ya que todos tus usuarios no tendrán estas devtools es mejor prevenir que curar.
Reducer
Deberemos de importar el estado inicial que crearemos posteriormente en el reducer.
¡Manos a la obra!
La forma de crear el store es la que podemos apreciar en la función configureStore:
import { createStore, applyMiddleware, compose } from 'redux'
import promise from 'redux-promise'
import rootReducer from './redux/reducers/index.js'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { INITIAL_STATE } from './redux/reducers/index'
const p = applyMiddleware(promise);
const t = applyMiddleware(thunk);
export function configureStore(initialState=INITIAL_STATE)
{
return createStore(
rootReducer,
initialState,
composeWithDevTools( // Los middlewares tienen que ir adentro
p,
t
)
)
}
Algunas preguntas frecuentes
¿Qué diferencia hay entre canalizar la información de mi aplicación con Redux y hacerlo sin Redux?
La organización de el flujo de datos de tu aplicación así como la segmentación de tu código.
¿Cómo conectar React con Redux?
Mediante el uso de la librería react-redux para la mayoría de los casos. Lo veremos a lo largo de los artículos y te darás cuenta de que no es nada complicado.
Aunque, en nuestro caso particular, si recuerdas estamos trabajando con Next.JS por lo que usaremos alguna librería más.
¿Puedo usar Redux sin usar ReactJS?
¡Claro! Redux es una librería independiente de React. Es más, como veremos necesitaremos de otra librería para conectarlos llamada react-redux. Por tanto, puedes usar Redux en el ambiente que quieras incluso con VanillaJS.
Mi recomendación es que si estás trabajando las vistas en con otra herramienta que no sea ReactJS revises si hay algo ya creado para ella. Por ejemplo, si usas Vue para tus vistas, es recomendable que uses Vuex para manejar el estado de tu aplicación.
¿Qué grandes aplicaciones están usando Redux hoy en día?
Sitios como Twitter, el administrador del blog de Wordpress hasta la aplicación de terminal HyperTerm.
¿Constituye una mala práctica el no usar Redux?
Siempre que trabajes con datos es recomendable usar Redux. Ahora bien, para proyectos pequeños en los que tampoco vas a usar mucho flujo de datos quizás cuesta más trabajo implementar Redux que el beneficio que te va a dar.
Personalmente recomiendo implementarlo en proyectos de mediana y gran escala sobretodo si usas React y si está trabajando en sacar una aplicación que puede tener que ser escalable sin duda es altamente recomendado. También te recomiendo usar Redux en pequeños proyectos de prueba, como el que vamos a adaptar en estos artículos para hacerte a trabajar con él :-).
Conclusiones
Una vez hemos tomado el punto de partida para Redux, crearemos, en los siguientes artículos las partes que Redux necesita para comenzar a funcionar.
Para ello, en la próximo artículo definiremos las acciones, lo que nos permitirá conocer muy bien las peticiones y cambio de el estado de nuestra aplicación que se van a producir y, de esta manera, tener un mayor control.
