ColorInput.tsx.diff

@@ -13,7 +13,7 @@ export const ColorInput = () => {
   }, []);

   const onChange = ({ target: { value } }) => {
-    dispatch({ type: 'UPDATE_HEX', payload: value })
+    dispatch(updateHex(value));
   };

   return show ? (

colorReducer.ts.diff

@@ -1,8 +1,12 @@
 import parse from 'parse-color';
+import { getType, createStandardAction, createAction } from 'typesafe-actions';
+
+export const updateHex = createStandardAction('UPDATE_HEX')<string>();
+export const updateRgba = createStandardAction('UPDATE_RGBA')<number[]>();

 export function colorReducer(state = {}, action): ColorContextProps {
   switch (action.type) {
-    case 'UPDATE_HEX': {
+    case getType(updateHex): {
       let nextState = { ...state };
       const hexColor = action.payload;
       if (/^#[a-f0-9]{6}$/i.test(hexColor)) {
@@ -16,7 +20,7 @@ export function colorReducer(state = {}, action): ColorContextProps {
       return nextState;
     }

-    case 'UPDATE_RGBA': {
+    case getType(updateRgba): {
       let nextState = { ...state };
       const rgbaColor = action.payload;
       if (!rgbaColor.some(isNaN)) {

HexInput.tsx.diff

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { ColorToolContext } from '~/ColorToolAppContext';
+import { updateHex } from '~/colorReducer';

 export const HexInput = () => {
   const { hex, dispatch } = useContext(ColorToolContext);
   const onChange = ({ target: { value } }) => {
-    dispatch({ type: 'UPDATE_HEX', payload: value })
+    dispatch(updateHex(value));
   };

   return (

RgbaInput.tsx.diff

@@ -1,5 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { ColorToolContext } from '~/ColorToolAppContext';
+import { updateRgba } from '~/colorReducer';

 export const RgbaInput = () => {
   const inputs = [useRef(null), useRef(null), useRef(null), useRef(null)];
@@ -7,7 +8,7 @@ export const RgbaInput = () => {
   const onChange = () => {
     const colorValues = inputs.map(({ current: { value } }) => value);

-    dispatch({ type: 'UPDATE_RGBA', payload: colorValues });
+    dispatch(updateRgba(colorValues));
   };

   return (