React Redux

No es novedad que en el aprendizaje de React debemos aprender Redux, que según la página oficial es “Redux es un contenedor predecible del estado de aplicaciones JavaScript.” Lo primero es definir contenedor, es un deposito o store en inglés. Esto contendrá los estados de la aplicación. Hasta aquí, todo esta esta claro. Pero hay un termino fundamental para entender el real contexto de que es Redux, es la palabra predecible o en inglés “predictable”, también se puede traducir como previsible que en definición es “que puede ser previsto”. No queda claro todavía, mucho juego de palabras. La última, previsto se refiere que podemos disponer, preparar o anticipar el valor de nuestros estados. Para concluir con este juego de palabras otra definición de redux puede ser “Un contenedor de estados que podemos anticipar su valor mediante acciones fáciles de manejar.”
Pd. Esto es la tesis de lo que voy entendiendo hasta ahora que es poco tiempo de redux y como toda tesis puede ser ir mejorando atreves del tiempo para llegar a otra conclusión o una síntesis de la misma.

Importamos la clase createStore de la librería Redux:

const {createStore } = Redux;

Creemos un objeto con createStore:

const store = createStore(counter);

Además pasamos el parámetro la función“counter” que se le llama el reducer y es quien contiene el estado de contador, veamos la función counter:

const counter = (state = 0, action) => {
 if(action.type === ‘INCREMENT’){
 return state +1;
 } else if (action.type === ‘DECREMENT’){
 return state -1;
 } else {
 return state;
 }
}

nuestro estado llamado contador tiene como valor por defecto 0 “state = 0”, este estado puede ser incrementado “INCREMENT” o decrecer “DECREMENT”.

A continuación, es registrar que parte de la página se va a actualizar al cambiar el estado:

store.subscribe(render)

Aquí es donde se utiliza React para el renderizado:

const render = () => {
 ReactDOM.render(
 <Counter 
 value={store.getState()}
 onIncrement={() =>
 store.dispatch({
 type: ‘INCREMENT’
 })
 }
 onDecrement={() =>
 store.dispatch({
 type: ‘DECREMENT’
 })
 } 
 />,
 document.getElementById(‘root’)
 );
};

Para entender esto revisemos el componente Counter:

const Counter = ({ 
 value,
 onIncrement,
 onDecrement
}) => (
 <div>
 <h1>{value}</h1>
 <button onClick={onIncrement}>+</button>
 <button onClick={onDecrement}>-</button>
 </div>
 );

Este componente tiene dos botones más y menos, al hacer click en el botón más se ejecuta el onIncrement:

onIncrement={() =>
 store.dispatch({
 type: ‘INCREMENT’
 })
 }

Esta función dispara la acción INCREMENT del dispatch de nuestro store, esta acción como dijimos anteriormente aumenta en 1 el state:

if(action.type === ‘INCREMENT’){
 return state +1;
 }

De igual modo funciona el onDecrement, lo último que faltaria explicar la actualización del valor del componente counter:

<h1>{value}</h1>

Recordando React esto es una propiedad del componente que fue parrametrizada en el llamado al componente:

<Counter 
 value={store.getState()} …

Así es, esta propiedad se obtiene del estado de nuestro store “ store.getState()”. Eso es todo, no hay magia, esto al inicio parece mucho trabajo extra pero cuanto más estados tenga nuestra aplicación web, se ira complicando el uso de los estados y difícil de mantener. Así que, cuanto más antes usemos redux menos dolores de cabeza más adelante.

El código fuente utilizado:
https://jsbin.com/fexavoz/25/edit?js,console,output

Algunos recursos y la fuente:
https://egghead.io/lessons/javascript-redux-react-counter-example
http://es.redux.js.org/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.