Counter Reducer Solution

useCounterReducer-2.js

// useCounterReducer.js
import * as React from 'react';

// Array destructuring disini sangat membantu code readability
const counterReducer = ([state, effect], action) => {
  if (action.type === 'INCREMENT') {
    return [state + 1];
  }
  
  if (action.type === 'DECREMENT') {
    if (state === 0) {
      // Raise effect!
      return [state, 'INVALID_STATE']
    }
    return [state - 1];
  }
  
  if (action.type === 'RESET_EFFECT') {
    return [state];
  }

  return [state, effect];
}

// Hooks, kita ubah sedikit ya disini biar lebih clean
export const useCounterReducer = () => {
  const [stateAndeffect, dispatch] = React.useReducer(counterReducer, [0]);

  return [
    stateAndEffect,
    {
      increment: () => dispatch({ type: 'INCREMENT' }),
      decrement: () => dispatch({ type: 'DECREMENT' }),
      resetEffect: () => dispatch({ type: 'RESET_EFFECT' }),
    }
  ];
}