Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Conozcamos Redux

logo de redux

Redux es simplemente un contenedor de estados para tu aplicación con Javascript, si lo definimos de una forma sencilla y al mismo tiempo un poco técnica, podríamos decir que es un objeto javascript que posee un conjunto de llaves que tienen la capacidad de actualizarse y modificarse a partir de métodos que disparan eventos. Consideremos que cada llave de este JSON es como un modulo de nuestra app, a dicho modulo le llamamos reducer y debe tener un valor o finalidad bien definida en nuestra aplicación, cada reducer esta acompañado de otros elementos conocidos como action types; su función es indicarle al reducer como va a actualizar los datos en según el action type que se este enviando.

Con Redux trabajamos bajo un esquema que posee grandes elementos involucrados: los Reducers, los Actions y la Store. 

conceptos básicos de redux

Entiendo que adaptarse es complejo sobretodo sino sabes las configuraciones de la Store final, ¿A que me refiero?, bueno cuando creas tus reducers te queda combinarlos e introducirlos en el objeto final conocido como store, este posee la capacidad de actualizarse a partir de un método llamado dispatcher que recibe un json con el action type y otros datos que desees utilizar para modificar el estado del reducer afectado.

flujo de datos de redux

En resumen, redux nos funcionara para almacenar los estados de nuestra aplicación  que pueden ser modificados a partir de los action types que se reciben por medio de un elemento de la store llamado dispatch, teniendo en cuenta que la store es un objeto creado a partir de multiples reducers y middlewares de ser necesario. Vamos a revisar este repositorio es un boilerplate básico que posee una store sencilla con un solo reducer que nos dará el mensaje "hola mundo", es mas común conseguir el ejemplo de un contador o un todo app pero quiero que se vea lo mas básico posible aunque parezca irracional usarlo para algo tan simple.

greetings.js

//constantes para los actions types
const ChangeMessage = "myBoilerplate/greetings/ChangeMessage";

// estado inicial del reducer
const initialState = {
  value: "hola"
}

// reducer exportado por defecto
export default function reducer(state = initialState, action)  {
  switch (action.type) {
    case ChangeMessage:
      return {
        ...state,
        value: action.message
      }
      break;
    default:
      return state
  }
}

// creador de acciones

export function load(message) {
  return {
    type: ChangeMessage,
    message
  }
}

Como vemos esta es la estructura de un reducer básico y para combinar nuestros reducer podemos ver el siguiente ejemplo:

reducer.js

import { combineReducers } from 'redux';
import { reducer as reduxAsyncConnect } from 'redux-connect';

import greetings from './greetings';

// la libreria redux nos proporciona esta función que nos permite mezclar nuestros reducers

export default combineReducers({
  greetings,
  reduxAsyncConnect
});

Existe mucho que explicar con respecto al tema de redux, esto es una simple introducción esperemos conocer un poco mas del tema de los middlewares y su uso y las diferentes practicas que podemos realizar con esta arquitectura junto con reactjs. 

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal