React useReducer

19/05/2019
Artículo original

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

import React, { useReducer } from 'react';
import R_merge from 'ramda/src/merge';
import ReactDOM from 'react-dom';

type Action =
  | { type: 'increment' }
  | { type: 'decrement' };

interface State {
  count: number
}

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return R_merge(state, { count: state.count + 1 });
    case 'decrement':

leer más