En esta publicaci贸n veremos como utilizar redux para obtener datos de una API. Con estos datos obtenidos vamos a llenar una lista de criptomonedas y agregar un buscador.
Para comprender el contenido debes de saber lo que es redux y sus principios. Si quieres m谩s informaci贸n fundamental sobre como usar redux, puedes revisar estas publicaciones:
Primera iteraci贸n, datos en duro en los componentes
La idea de empezar con los datos en duro es conocer el formato de lo que responde la API y como esos datos los queremos encajar en los componentes visuales.
驴C贸mo son los datos de la respuesta del API?
Primero revisemos la forma de los datos que regresa la API. Estos datos son tomados de aqu铆. M谩s adelante simularemos la petici贸n al API para facilitar el desarrollo.
Vamos a crear la interfaz pensando en los datos mostrados y componentes, de momento se me ocurre una tabla donde estar谩n listados los detalles del mercado y un campo de b煤squeda.
Componente CryptoMarkets
Entonces agregamos un componente contenedor /src/CrytoMarkets/CryptoMarkets.js. En este componente contenedor vivir谩n los dos componentes antes mencionados, uno para hacer la b煤squeda y otro para la tabla donde se listaran los mercados y el resultado de la b煤squeda.
Y para que se vea como una tabla le agregamos los siguientes estilos en /src/CrytoMarkets/Table.module.scss. Los estilos no es tema de esta publicaci贸n as铆 que no le tomes mucha importancia por el momento, en caso de que se te compliquen.
Lo 煤nico es que si no est谩s haciendo el buscador en codesandbox y te sale alg煤n problema con los estilos en sass, instala la librer铆a de la siguiente forma.
En la tabla podemos notar que los divs que contiene los datos y el div del encabezado son muy similares, dentro se encuentran varios p谩rrafos conteniendo cada pedazo de informaci贸n. As铆 que crearemos un componente que hago eso, lo que contiene cada fila de la tabla.
Dentro del componente Table agregamos dos arreglos, uno para el header de la tabla y otro para una fila de la tabla. Como mencionamos antes, el header y las filas son muy similares, as铆 que reutilizamos el mismo componente TableRow para generarlos.
Como te puedes dar cuenta el componente TableRow recibe items y className como propiedades, para que el header de la table no tenga el efecto del estilo :hover agregamos la clase .header.
Generando filas din谩micamente y dummies separados.
Usamos el nombre del mercado como el id porque es un dato que no se puede repetir. En este punto debemos tener algo as铆:
Buscador con dummies
Segunda Iteraci贸n, agregando Redux
Para usar redux, necesitamos instalar la librer铆a redux y para facilitar su uso en React instalamos tambi茅n react-redux. Desde condesandbox puedes agregar estas dependencias en la parte inferior izquierda del editor donde dice “Dependencies“.
En tu computadora local corre el siguiente comando.
yarn add redux react-redux
En este punto ya sabemos la forma en que necesitamos los datos, la tabla necesita unos headers y una lista de filas con valores (rows).
Adem谩s, necesitamos crear un store que sea accesible desde cualquier parte de nuestra aplicaci贸n. El principal insumo que necesita el store es un reducer. A煤n no obtendremos los datos de los mercados de la API, utilizaremos de momento los datos del archivo /src/CryptoMarkets/dummies.js
Importamos la funci贸n createStore que recibe una funci贸n reducer y opcionalmente un estado inicial. La funci贸n reducer de momento solo regresar谩 el estado inicial tal cual, como sabemos, en redux las funciones reducers reciben un estado y una acci贸n. Como segundo par谩metro opcional le pasamos los datos dummies.
La funci贸n configureStore la utilizaremos a continuaci贸n.
Hacer al store accesible
Para que cualquier componente pueda acceder al store es necesario crear un contexto global, esto normalmente se realiza con React.createContext() y usando su componente Context.Provider. Por suerte la librer铆a react-redux ya cuenta con este funcionamiento y podemos utilizar su propio componente Provider.
Si tienes curiosidad como usar el Context de React, puedes revisar esta publicaci贸n:
Al componente Provider debemos pasarle una propiedad store. Esa propiedad es el store generado por la funci贸n configureStore que creamos en la secci贸n anterior.
Acceder al store desde el componente contenedor CryptoMarkets
Ahora que ya tenemos el store listo para usarse, vamos a obtener el estado para mostrar el listado de markets en el componente Table.
Usamos lo que en redux llaman selectors, los cuales son funciones que acceden a una parte especifica del estado para facilitar su acceso. Se usa el “custom hook” useSelector de react-redux para invocar las funciones selectoras.
Componente Table recibe headers y rows como propiedades
Finalmente, el componente Table debe poder recibir las propiedades headers y rows en lugar de importarlos del dummies.js
El resultado deber谩 ser el mismo de la primera iteraci贸n, pero con los datos obtenidos del store
Buscador con dummies
Implementar la busqueda de mercados
La b煤squeda que vamos a implementar ser谩 por el nombre del mercado. As铆 que bas谩ndonos en los datos del archivo /src/CrytoMarkets/dummies.js, vamos a modificar nuestra funci贸n reducer para agregar la acci贸n de filtrado.
Creamos el archivo /src/CryptyoMarkets/cryptoMarketsState.js donde ahora vivir谩 nuestro reducer, separ谩ndolo del archivo /configureStore.js.
// state = { headers [], all = [], filtered = []}exportdefaultfunctioncryptoMarkets(state,action){switch (action.type) {case"FILTER_MARKETS":return{...state, filtered:state.all.filter((market)=>market.id.includes(action.payload) )};default:returnstate;}}
El comentario muestra la estructura del estado. La estructura s茅 cambio porque necesitamos guardar la lista original de mercados para ser utilizado en cada b煤squeda, de lo contrario filtrar铆amos mercados sobre los 煤ltimos filtrados y as铆 sucesivamente eliminando todos los mercados.
Una acci贸n es un objeto literal que contiene un tipo y dem谩s datos necesarios para cambiar el estado del store, estos datos los vamos a guardar en una propiedad llamada payload.
La acci贸n 'FILTERED_MARKETS', filtra todos los markets que en su propiedad id incluyan el texto contenido en payload.
Disparar acci贸n de filtrado desde el componente CryptoMarkets
Aunque ya creamos la acci贸n, debemos dispararla cuando el usuario escribe en el campo de b煤squeda, primero vamos a modificar el componente SearchField. Ahora adem谩s de recibir el label como propiedad, tambi茅n la funci贸n que se ejecuta cada vez que el valor de b煤squeda cambia.
Se usa el “custom hook” useDispatch de react-redux para disparar acciones desde cualquier componente funcional. Este hook regresa una funci贸n dispatch que se utiliza para disparar cualquier acci贸n.
Al componente SearchField se le pasa la propiedad onSearchChange donde recibe la funci贸n que invoca la acci贸n cuando el valor del campo de b煤squeda cambia.
El resultado de esta iteraci贸n debe ser algo como lo siguiente:
Buscador implementado
Refactor, action creator para disparar b煤squeda
Los action creators no son m谩s que simples funciones que regresan una acci贸n, y una acci贸n es simplemente un objeto literal con un tipo y datos necesarios para la acci贸n. En esta ocasi贸n vamos a crear el action creator para la acci贸n FILTER_MARKETS. En el archivo /src/CryptoMarkets/cryptoMarketsState.js agregamos al final lo siguiente
En el c贸digo anterior se importa el json en una variable llamada markets y se crea una promesa con un temporizador de un segundo, despu茅s del segundo la promesa se resuelve retornando los datos de los mercados (contenidos en la variable markets).
Usar redux-thunk para obtener los markets
驴Qu茅 es un thunk?
Su definici贸n en el 谩mbito de programaci贸n en general:
Los thunks se utilizan principalmente para retrasar un c谩lculo hasta que se necesite su resultado.
https://en.wikipedia.org/wiki/Thunk
En react se utiliza para escribir funciones en redux con l贸gica avanzada relacionadas con el estado de la aplicaci贸n. Donde se puede trabajar con operaciones tanto as铆ncronas como s铆ncronas. Estas funciones thunk tienen acceso a las funciones dispatch() y getState() de redux, por esta raz贸n un thunk internamente puede disparar cualquier numera de acciones y obtener los datos actuales del estado por si son necesarios en su l贸gica de programaci贸n.
Crear un Thunk action creator
En realidad un thunk se usa como se usan los action creators, por ese se les llama Thunk action creator.
En el codigo de arriba, el action creator regresa una funci贸n as铆ncrona que recibe solo la funci贸n dispatch (no vamos a necesitar la funci贸n getState()). La funci贸n comienza pidiendo los markets y una vez obtenidos, dispara la acci贸n RECEIVE_MARKETS.
Actualizar reducer para entender la acci贸n RECEIVE_MARKETS
En el archivo /CryptoMarkets/cryptoMarketsState.js agregamos 茅l case para la acci贸n RECEIVE_MARKETS. El c贸digo de este archivo debe quedar como el de abajo.
Para que el thunk se ejecute correctamente es necesario indicarle al store como tratar este tipo de funciones, para eso necesitamos agregar el middleware de react-thunk. Un middleware extiende o mejora la funcionalidad en un punto medio del software o comunica diferentes puntos de la aplicaci贸n, y tambi茅n puede comunicar aplicaciones diferentes. De hecho en redux tambi茅n se les llama enhancers.
Primero importamos la funci贸n applyMiddleware, luego importamos el middleware llamado thunk y finalmente aplicamos el middleware en el terecer parametro de createStore.
Tambi茅n cambiamos el initialState, los header los dejamos en el archivo dummies.js. Las propiedades all y filtered las cambiamos a array vac铆os.
Invocando el thunk desde el componente CryptoMarkets
Por 煤ltimo, necesitamos invocar nuestro thunk para obtener los markets de nuestro servicio simulado. El archivo /CrytoMarkets/CryptoMarkets.js donde vive el componente padre CryptoMarkets debe quedar como el de abajo.
En este punto nuestra aplicaci贸n nos debe mostrar un error porque el formato de las propiedades de los componentes no son iguales a la respuesta del api, pero podemos agregar un console.log(action) en el reducer para comprobar que el api simulado est谩 respondiendo con los datos.
En la imagen de arriba vemos en la consola que recibimos los datos del API simulado. En la siguiente secci贸n eliminaremos este error mapeando correctamente los datos al formato de como los necesita el componente.
Mapeando datos a UI
Para que el error desaparezca, necesitamos mapear los datos obtenidos del servicio a datos que entienda los componentes, para esto creamos el archivo /mappers.js y vamos a crear las funciones de mapeo:
Ahora la funci贸n de mapeo es recibida por nuestro thunk, de esta manera, podemos utilizar diferentes mapeos para diferentes tipos de componentes. Imag铆nate que tenemos otra pantalla donde necesitamos mostrar la misma informaci贸n en una lista de cards, 驴Verdad que el mapeo es diferente? 麓Todo lo dem谩s se deja intacto y solo cambiamos el mapeo.
Para esta pantalla donde tenemos una tabla, el resultado es el siguiente:
Error arreglado
Estilos en campo de b煤squeda
Un toque final, vamos a mejorar el campo de b煤squeda creando estos estilos:
Todav铆a quedan m谩s cosas por hacer y mejorar, al igual que hicimos en esta publicaci贸n incrementando en iteraciones peque帽as hasta conseguir que funcione el buscador, as铆 tendremos m谩s publicaciones para continuar mejorando e incrementando a煤n m谩s las funcionalidades.
Estos dos React hooks se complementan a la hora de crear aplicaciones. Si tu aplicaci贸n no es tan grande y compleja, estos dos react hooks te ayudaran a manejar el estado global de una forma muy similar a como lo hace Redux.
Si no est谩s familiarizado con Redux, te recomiendo revisar los principios usados en Redux. Adem谩s la combinaci贸n de useContext y useReducer es un buen punto de partida para empezar a entender como funciona.
Primero aprenderemos a utilizar useContext, luego useReducer, y finalmente uniremos estos dos React Hooks para replicar el comportamiento b谩sico de Redux y controlar el estado global de una peque帽a aplicaci贸n.
Contexto
La idea del contexto es que ah铆 guardes cierta informaci贸n que necesitas en varios componentes. El problema a resolver es que esos componentes se encuentran en diferentes niveles del 谩rbol de nodos de tu aplicaci贸n. Por esta raz贸n, una instancia de un contexto contiene dos propiedades componentes, un Proveedor y un Consumidor (Provider, Consumer). Como consecuencia el proveedor almacena y suministra los datos, mientras el consumidor pide acceso a ellos.
Agregando a useContext, existen tres formas de consumir el contexto actual de una aplicaci贸n
static contextType = UnContexto
<UnContexto.Consumer>
useContext(UnContexto)
Las tres maneras de obtener el contexto depende de que exista su correspondiente componente proveedor padre <UnContexto.Provider>. De las tres, la forma m谩s simple es useContext(UnContexto), punto a favor de los React Hooks.
A continuaci贸n vamos a describir el ejemplo para la creaci贸n del contexto, m谩s tres ejemplos de los modos de consumirlo.
createContext(defaultContext)
Primero necesitamos crear un contexto para poder consumirlo, la forma de crear el contexto no cambia para los consumidores.
Creamos un nuevo proyecto en codesandbox.io y creamos un archivo llamado UserNameContext.js con el siguiente contenido. En el ejemplo queremos obtener del nombre de un usuario en nuestra aplicaci贸n, que se usa en distintos componentes.
Ahora en nuestro archivo App.js importamos el contexto.
import UserNameContext from'./UserNameContext';
Necesitamos suministrar a la aplicaci贸n con los datos de nuestro contexto, para eso ocupamos al componente <UserNameContext.Provider> y actualizamos el valor del contexto cuando el usuario escribe en el campo de texto.
El componente <Header> es padre del componente <UserInfo>, de esta manera se ejemplifica el consumo del contexto en un tercer nivel de componentes.
El componente de <UserInfo /> contendr谩 al consumidor del contexto. As铆 que este es el 煤nico componente que cambiara su implementaci贸n para ejemplificar los tres modos de consumo del contexto. En las siguientes tres secciones se muestra cada forma.
static contextType = UnContexto
Para usar esta forma de consumir el contexto, debemos crear un componente de clase. La importaci贸n del contexto debe aplicarse tambi茅n para los otros dos formas. Es algo que no cambia en las tres implementaciones.
Simplemente se agrega una propiedad est谩tica contextType a la clase, asign谩ndole como valor el objeto contexto generado por createContext(initialContext) anteriormente.
Luego podemos usar this.context en cualquiera de los m茅todos del ciclo de vida de un componente en React, para hacer referencia al valor actual del contexto y utilizarlo. Tal cual como se muestra en el ejemplo de arriba, donde utilizamos el m茅todo render().
<UnContexto.Consumer>
Esta manera de consumir el valor del contexto, pude usarse en un componente de clase o en un componente funcional, necesitamos importar el objeto del contexto y utilizar el componente Consumer que est谩 definido como propiedad del objeto contexto.
Al componente Consumer mencionado en el p谩rrafo anterior le pasamos como children una funci贸n, la cual puede recibir como primer par谩metro el valor actual del contexto. Por 煤ltimo en este ejemplo mostramos el valor del contexto en una etiqueta <p>.
Uno de los objetivos de esta publicaci贸n es mostrar como usar el React Hook useContext(UnContexto), este hook es el equivalente a la propiedad static contextTypes = UnContexto en un componente de clase o el uso del componente <UnContexto.Consumer>, es decir, tambi茅n puede obtener el valor actual del contexto y subscribirse a cambios del mismo.
Igual que las dem谩s formas, importamos el objeto contexto, luego dentro del componente funcional, invocamos a useContext pas谩ndole como par谩metro el propio contexto. As铆 obtenemos el valor actual del contexto y lo guardamos en la constante value. Si el contexto cambia, esto provocara que el componente <UserInfo /> se vuelva a renderizar con el nuevo valor del contexto.
Compara la complejidad de obtener el contexto con useContext(UserNameContext), static contextType = UserNameContext y <UserNameContext.Consumer>.
Este React Hook es bastante interesante como alternativa a useState, se recomienda usarlo cuando:
Necesitas controlar el estado en alg煤n objeto complejo, lo m谩s com煤n es en un objeto literal o Arreglo
Realizar l贸gica compleja relacionada con el estado previo para calcular el pr贸ximo estado.
useReducer, como su nombre lo indica utiliza una funci贸n reducer, esta funci贸n es la que se encarga de manejar la complejidad de los cambios en el estado de la misma forma que los reducers en Redux.
reducerFn, es la funci贸n reducer encargada de la l贸gica de actualizar el estado, es una funci贸n en la forma (state, action) => { }.
initialState, es el estado inicial.
initLazyFn, este par谩metro es opcional, se usa para calcular el estado inicial final basado en el initialState, se invoca initLazyFn(initialState) para obtener el estado final. 脷til para separar la l贸gica del c谩lculo del estado inicial de la funci贸n reducerFn.
Ejemplo
Creamos un nuevo proyecto en codesandbox.io, y en el archivo App.js ponemos lo siguiente:
El ejemplo es un formulario donde se guarda el nombre, apellido y edad de un usuario conforme escribe en sus respectivos inputs. Luego hasta el final tiene un bot贸n para guardar al usuario en locaStorage al enviar el formulario.
Se tiene en archivos diferentes ainitialState,initLazyFn (parseInitialState) y reduceFn(reduceUser).
initialState e initiLazyFn
initialState.js, como ya mencionamos es el estado inicial.
exportdefault{name:"",age:0,lastName:""};
parseInitialState.js (initLazyFn), dado que al enviar el formulario se guarda en el localStorage, se debe parsear los datos del localStorage si es que existen.
reduceUser.js, la mayor铆a de las acciones realmente no son tan complejas, pero tampoco tan simples para usarlo en un useState(). El usuario guardado se puede almacenar en un arreglo de usuarios y que sea parte del estado, sin embargo no queremos complicar m谩s las cosas, adem谩s necesitar铆amos crear un componente que liste los usuarios.
Ahora bien, ya que tenemos todo el c贸digo de los archivos separados, podemos revisar el archivo App.js. En el componente App, en lugar de usar useState, se invoca a useReducer.
Se utiliza el evento onChange para disparar acciones con dispatch() y el evento onSubmit en el formulario para guardar en localStorage (“saveUser”). Aqu铆 abajo el ejemplo completo.
Preparando codigo para combinar useContext y useReducer
Vamos a mejorar el ejemplo anterior, siguiendo las pautas que nos indica Redux, agregaremos todo lo relacionado con el estado en una carpeta llamada store.
Primero definimos el nombre de funciones como constantes en el archivo /store/actionTypes.js, para hacer referencia a ellas sin alg煤n error de escribirlo incorrectamente.
Y finalmente vamos a actualizar las importaciones y las invocamos las funciones actions en App.js. Esto 煤ltimo para obtener el objeto action que necesita reduceUser(state, action) y tener un c贸digo m谩s corto y entendible. Al menos en este caso nos evitamos la notaci贸n dispatch({ type: 'updateLastName', payload: e.target.value }). Ahora solo hacemos dispatch(updateLastName(e.target.value))
En esta secci贸n vamos a utilizar useContext y useReducer para crear una peque帽a aplicaci贸n al estilo Redux.
Primero vamos a dividir nuestra peque帽a aplicaci贸n en varios componentes, agregaremos un componente <Header> el cual contendr谩 a otro llamado <UserInfo>. Luego otro componente <UserForm> donde usaremos el contexto para usar las acciones de nuestro reducer y el estado.
Header y UserInfo
Creamos una carpeta llamada components y creamos tres archivos, Header.js, UserInfo.js y UserForm.js.
En el componente <UserInfo>, a diferencia de la primera versi贸n que hicimos al inicio de esta publicaci贸n, el valor del contexto es un arreglo conteniendo state y dispatch. Solo que en <UserInfo> solo nos interesa state.
Antes de crear el componente <UserForm>, vamos a crear el contexto que se utilizara en <UserInfo> y en <UserForm>.
Crear contexto
Creamos el archivo /store/UserContext.js dentro de la carpeta store
Como vemos agregamos el componente <Provider> del objeto UserContext y le asignamos como valor un arreglo conteniendo state y el dispatch. Si queremos podemos pasar solo una variable, as铆 podemos decir que el valor del contexto es el store, en realidad esto es igual a como lo hace Redux, solo que redux trae su propio Provider.
Ahora si podemos crear el componente <UserForm> que utilizara el contexto y disparar谩 las acciones a nuestra funci贸n reduceUser, es decir, utilizara el store de la aplicaci贸n.
Archivo /components/UserForm.js. Simplemente copiamos el contenido JSX del formulario que estaba App.js, importamos los action creators y el UserContext para utilizar useContext(UserContext) y obtener el store.
Listo podemos tener nuestra aplicaci贸n con un store igual al de Redux sin importar esta librer铆a, esta funcionalidad ya viene construida dentro de React.
Por si no sabias como usar el contexto, en esta publicaci贸n aprendimos como crearlo y suministrar su valor a cualquier elemento hijo del 谩rbol de nodos. Despu茅s para consumir el valor utilizamos las tres formas de hacerlo:
static contextType = UnContexto
<UnContexto.Consumer>
useContext(UnContexto)
Al final utilizamos el React Hook useContext y comparamos las complejidades, por consiguiente se puede notar que el useContext es la forma m谩s simple de obtener el valor del contexto.
Aprendimos a utilizar useReducer() y como su funcionalidad es casi id茅ntica a los reducers de Redux. Luego mejoramos el c贸digo para separar la funci贸n reducer, los actions y los action types tal cual se har铆a en Redux separando responsabilidades.
Finalmente usamos createContext, useContext y useReducer para tener acceso al store de la misma forma que lo hacemos con Redux. Concluyendo que sin la necesidad de una librer铆a de terceros, como lo es Redux, React ya contiene este tipo de funcionalidad gracias a los React Hooks useContext y useReducer. Estos hooks son ideales para aplicaciones peque帽as que no necesiten de las funcionalidades avanzadas de Redux.
Redux es un contenedor predecible del estado de aplicaciones JavaScript.
Te ayuda a escribir aplicaciones que se comportan de manera consistente, corren en distintos ambientes (cliente, servidor y nativo), y son f谩ciles de probar. Adem谩s de eso, provee una gran experiencia de desarrollo, gracias a edici贸n en vivo combinado con un depurador sobre una l铆nea de tiempo.
redux.org
Te permite controlar el flujo de datos de una aplicaci贸n Javascript, este flujo de los datos funciona en una sola direcci贸n. Por esta 煤nica direcci贸n es mucho m谩s f谩cil controlar las mutaciones y operaciones as铆ncronas.
Redux es parecido a flux, de hecho est谩 basado en flux
En el estado de una aplicaci贸n, principalmente en aplicaciones SPA, esto es muy importante, porque las aplicaciones web modernas tienen gran complejidad de operaciones as铆ncronas. Adem谩s de controlar el estado entre los componentes.
驴Qu茅 problemas puedo mitigar con Redux?
En el ejemplo de aplicaciones web, estas necesitan controlar peticiones a servidores, obtener datos y controlar el estado en el cliente. Aun cuando estos datos no han sido guardados en el servidor.
Estas aplicaciones modernas requieren de un control complejo y por eso nuevos patrones de arquitectura como Redux y flux nacen para hacer el desarrollo m谩s productivo.
Las mutaciones de objetos son dif铆ciles de manejar y m谩s a escalas medianas y grandes. Se comienza a perder el control de los datos, este flujo de datos generan comportamiento no deseados. Mala informaci贸n desplegada al usuario y c贸digo que es muy dif铆cil de mantener.
Sin contar cosas m谩s elevadas como tu salud y causa de estr茅s por el esfuerzo en arreglar estas inconsistencias, te hace perder tiempo para mantener la aplicaci贸n funcionando correctamente. Por si fuera poco afectas a tus usuarios porque ellos obtienen informaci贸n incorrecta y pierden su tiempo al utilizar esa informaci贸n.
驴Qu茅 decir de las operaciones as铆ncronas? Bueno, pr谩cticamente pasa lo mismo o a煤n peor. Porque en una operaci贸n as铆ncrona no sabes cuando obtendr谩s el resultado y adem谩s normalmente vienen acompa帽adas con el deseo de hacer modificaciones al estado de la aplicaci贸n.
Un ejemplo com煤n es el control de los datos de tu aplicaci贸n con cualquier frawework front-end de componentes visuales.
驴De qu茅 est谩 hecho Redux? Tres elementos
Store. El store es un objeto donde guardas toda la informaci贸n del estado, es como el modelo de una aplicaci贸n, con la excepci贸n que no lo puedes modificar directamente, es necesario disparar una acci贸n para modificar el estado.
Actions. Son el medio por el cual indicas que quieres realizar una modificaci贸n en el estado, es un mensaje o notificaci贸n liviana. Solo enviando la informaci贸n necesaria para realizar el cambio.
Reducers. Son las funciones que realizan el cambio en el estado o store, lo que hacen internamente es crear un nuevo estado con la informaci贸n actualizada, de tal manera que los cambios se reflejan inmediatamente en la aplicaci贸n. Los reducers son funciones puras, es decir, sin efectos colaterales, no mutan el estado, sino que crean uno con informaci贸n nueva.
驴Qu茅 principios debo seguir? Tres principios
Un 煤nico Store para representar el estado de toda la aplicaci贸n. Tener una sola fuente de datos para toda tu aplicaci贸n permite tener centralizada la informaci贸n, evita problemas de comunicaci贸n entre componentes para desplegar los datos, f谩cil de depurar y menos tiempo agregando funcionalidad o detectando errores.
Estado de solo lectura. Esto permite tener el control de cambios y evitar un relajo entre los diferentes componentes de tu aplicaci贸n, ni los componentes, ni peticiones ajax pueden modificar directamente el Estado (state) de tu aplicaci贸n, esto quiere decir que si quieres actualizar tu estado, debes hacerlo a trav茅s de actions, de esta manera redux se encarga de realizar las actualizaciones de manera estricta y en el orden que le corresponden.
Los cambios solo se hacen con funciones puras. Al realizar los cambios con funciones puras, lo que realmente se hace es crear un nuevo objeto con la informaci贸n actualizada, estas funciones puras son los reducers y no mutan el estado, al no mutar el estado, se evitan problemas de control, datos incorrectos, mal comportamiento y errores, tambi茅n permite que la depuraci贸n sea m谩s f谩cil. Puedes dividir los reducer en varios archivos diferentes y las pruebas unitarias son f谩ciles de implementar. Los reducers son funciones puras que toman el estado anterior y una acci贸n, y devuelven un nuevo estado.
Otras arquitecturas como MVC (Modelo, Vista, Controlador), los cambios pueden existir en ambas direcciones, es decir, la vista puede cambiar el estado, el modelo lo podr铆a modificar y tambi茅n el controlador. Todos estos cambios necesitan estar sincronizados en varias partes de una aplicaci贸n para evitar inconsistencias, lamentablemente este problema de inconsistencia se vuelve muy dif铆cil y tedioso de resolver.
Lo anterior no sucede con Redux.
驴C贸mo funciona? Mi primer estado predecible con Redux
Primero veamos el flujo de una sola direcci贸n de redux:
Redux: flujo de control una sola direcci贸n
Ahora un ejemplo concreto para saber de que estamos hablando, el control de un contador:
Si quieres probar este ejemplo en tu m谩quina recuerda insertar o importar la librer铆a Redux. En este ejemplo podemos ver el funcionamiento de Redux, cada vez que se da clic sobre los botones de incrementar y decrementar, el contador se incrementa y decrementa.
Si ahora nos vamos al c贸digo JS, podremos ver que solo tenemos una funci贸n llamada counter, esta funci贸n es un reducer y es una funci贸n pura, sin efectos colaterales.
Luego vemos que como par谩metros recibe un state y un action, cuando creamos nuestro Store con Redux, estas funciones reducer son utilizadas para modificar el State.
Normalmente, el state, reducer y action son definidos en puntos diferentes, y pueden ser organizados en varios archivos y carpetas dependiendo de la necesidad de la aplicaci贸n, toda esta organizaci贸n tiene la finalidad de tener un c贸digo limpio y separar funcionalidades. En este caso sencillo no es necesario, en un solo archivo tenemos todo.
State
Nuestro state es solo un valor num茅rico, el cual se va a incrementar o decrementar con los botones que est谩n en la p谩gina, normalmente el state es un objeto literal o un array literal, pero en nuestro caso solo necesitamos un n煤mero. Su definici贸n podr铆a estar en otro archivo, sin embargo, para este ejemplo no es necesario, lo agregamos como valor por defecto del par谩metro state.
functioncounter(state=0,action){...
Actions
Si seguimos revisando nuestro c贸digo, veremos unos cuantas condiciones que revisa el valor del par谩metro action y dependiendo de la acci贸n, se ejecuta alguna operaci贸n, en nuestro caso son las operaciones INCREMENTAR o DECREMENTAR.
Los actions no son m谩s que objetos literales como los siguientes:
Los reducer revisan esos actions, en nuestro ejemplo:
if (action.type ==='INCREMENTAR') {returnstate+1;}if (action.type ==='DECREMENTAR') {returnstate-1;}
Con todo esto ya tenemos nuestro State y su estado inicial en caso de no estar definido, tambi茅n nuestra primer reducer, counter, y nuestros primeros actions INCREMENTAR y DECREMENTAR.
Store
Es el momento de crear nuestro Store, utilizando la librer铆a redux esto es muy f谩cil:
const store = Redux.createStore(counter);
Con la anterior l铆nea, Redux crea un Store para controlar el estado de nuestra aplicaci贸n. Internamente, un Store es un Patr贸n observador que utiliza un Singleton para el State y expone los siguientes m茅todos principales:
store.getState()
store.subscribe(listener)
store.dispatch(action)
store.getState() te permite obtener el estado actual de tu aplicaci贸n.
store.subscribe(listener) ejecuta la funci贸n listener (u observador), cada vez que el store es actualizado.
store.dispatch(action) pide actualizar el estado, esta modificaci贸n no es directa, siempre se realiza a trav茅s de un action y se ejecuta con un reducer.
Reaccionar a cambios del state
Luego creamos una funci贸n render, para que se ejecute cada vez que el State de tu aplicaci贸n cambie.
Aqu铆 te preguntar谩s, 驴C贸mo es posible que esa l铆nea imprima 0 en la pantalla?, pues internamente el store invoca un dispatch con un action vac铆o store.dispatch({}), esto invoca nuestra funci贸n reducer y al no encontrar ninguna acci贸n, entonces regresa el estado inicial 0.
Luego nos subscribimos a store para escuchar u observar el State cada vez que se actualice y poder ejecutar la funci贸n render().
store.subscribe(render);
Esta l铆nea permite que cuando demos clic en los botones de incrementar y decrementar, se imprima el nuevo valor en la p谩gina volviendo a renderizar su contenido.
Ejecutar dispatch a trav茅s de eventos del DOM
Y por 煤ltimo agregamos dos listeners correspondientes a los botones de incrementar y decrementar, cada bot贸n realiza una invocaci贸n dispatch para modificar el estado.
Al fin tenemos el flujo de datos de nuestro sencillo ejemplo usando Redux, en general los componentes que forman a una aplicaci贸n que utiliza Redux son los siguientes:
Redux: flujo de control completo
Conclusiones
Podemos notar el flujo en una sola direcci贸n desde la vista con los actions dispatch(action), luego los reducers counter(prevState, action) para modificar el store y este 煤ltimo manda la informaci贸n a trav茅s de subscribe(render) y getState().
Redux como ya se mencion贸 en p谩rrafos anteriores, nos proporciona:
El conocimiento en todo momento del estado de nuestra aplicaci贸n y en cualquier parte de la aplicaci贸n con mucha facilidad.
F谩cil organizaci贸n, con actions, reducer y store, haciendo cambios en una sola direcci贸n, adem谩s puedes separar tus actions, reducer y el store en varios archivos.
F谩cil de mantener, debido a su organizaci贸n y su 煤nico store, mantener su funcionamiento y agregar nuevas funcionalidades es muy sencillo.
Tiene muy buena documentaci贸n, su comunidad es grande y tiene su propia herramienta para debuguear
Todos los puntos anteriores hacen que sea f谩cil de hacer pruebas unitarias.
Y lo m谩s importante, te ahorra tiempo, dinero y esfuerzo xD.