React useReducer

Cuando queremos manejar estado mas complejo que una sola variable, o que depende muchas condiciones antes de entregar el valor final. Es mejor usar useReducer, este hook es sumamente similar a Redux y como tal es un observer de estado al que podemos subscribir nuestro componente.

Redux no es igual a Hooks o al revés useReducer no es Redux, hay importantes consideraciones de diseño al momento de querer reemplazar redux con hooks, eso lo veremos después cuando presentemos algo mas complejo que un simple contador, de momento vamos a expandir nuestro contador.

El nuevo contador

El nuevo contador nos permitirá incrementar o reducir su valor a voluntad. Solo tiene dos botones a continuación presento el código

Como puedes ver es muy muy muy parecido a Redux, pero no es un estado global, es un estado para el componente que tenemos en este caso Hello, solo tenemos dos acciones llamadas increment y decrement. Estas las asignamos a los botones específicos. Nada complejo, también podemos ver que estamos usando typescript por lo que hay que definir los tipos, como no se muy bien typescript les dejo el link en el que me base: . esto para que uds. puedan hacer las modificaciones que mas les gusten.

Si pero no

Una de las razones por las que considero que no cometo tantos errores (al menos no como antes con jQuery, backbone y similares) es que trato de hacer lo mas posible immutables mis colecciones, de modo que no tenga side effects inesperados, algo que ni typescript tiene, por lo que yo siempre uso una librería llamada Ramda; es como underscore pero 100% funcional e immutable sin crear wrappers como en immutable.js.

Sigo sin ver la utilidad de typescript, mas allá de documentar los tipos que también se puede hacer con jsdoc y si usas un editor que soporte jsdoc funciona exactamente igual que typescript, por lo tanto este es el ultimo código creado en typescript, como bien escribi anteriormente para encontrar errores nada como pruebas de unidad.

Les dejo el mismo componente pero en ES6, con los estilos de codificación que normalmente uso:

Las diferencias son mínimas, pero el resultado es el mismo.