Conozcamos Redux

Reduxes 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. 

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.

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

1//constantes para los actions types
2const ChangeMessage = "myBoilerplate/greetings/ChangeMessage";
3
4// estado inicial del reducer
5const initialState = {
6  value: "hola"
7}
8
9// reducer exportado por defecto
10export default function reducer(state = initialState, action)  {
11  switch (action.type) {
12    case ChangeMessage:
13      return {
14        ...state,
15        value: action.message
16      }
17      break;
18    default:
19      return state
20  }
21}
22
23// creador de acciones
24
25export function load(message) {
26  return {
27    type: ChangeMessage,
28    message
29  }
30}
31

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

reducer.js

1import { combineReducers } from 'redux';
2import { reducer as reduxAsyncConnect } from 'redux-connect';
3
4import greetings from './greetings';
5
6// la libreria redux nos proporciona esta función que nos permite mezclar nuestros reducers
7
8export default combineReducers({
9  greetings,
10  reduxAsyncConnect
11});
12

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.