jinook929

import React from 'react'
import '../App.css'

import {resetCount} from '../actions'
import {useDispatch} from 'react-redux'

const Reset = () => {
  const dispatch = useDispatch()
  return (
    <div className="Reset">

jinook929

import React from 'react'
import '../App.css'

import {increaseCount, decreaseCount} from '../actions'
import {useSelector, useDispatch} from 'react-redux'

const Controllers = () => {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()
  return (

jinook929

import React from 'react'
import Controllers from "./Controllers"

import {useSelector} from 'react-redux'

const Counter = () => {
  const count = useSelector(state => state.count)
  return (
    <div className="Counter">
      <h1>{count}</h1>

jinook929

import React, {useEffect} from 'react'
import '../App.css'

import {useSelector} from 'react-redux'

const ClickedTime = () => {
  const count = useSelector(state => state.count)
  const lastChange = new Date().toLocaleString()
  useEffect(() => {    
    const randomHex = '#'+ Math.floor(Math.random()*16777215).toString(16)

jinook929

...
import {connect} from 'react-redux'

const ClickedTime = (props) => {
  ...
  useEffect(() => {    
    const randomHex = '#'+ Math.floor(Math.random()*16777215).toString(16)
    document.querySelector(".ClickedTime").style.color = randomHex
  }, [props.count])
  ...

jinook929

...
import {connect} from 'react-redux'

const ClickedTime = (props) => {
  ...
  useEffect(() => {    
    const randomHex = '#'+ Math.floor(Math.random()*16777215).toString(16)
    document.querySelector(".ClickedTime").style.color = randomHex
  }, [props.count])
  ...

jinook929

...
import {connect} from 'react-redux'
import {resetCount} from '../actions'

const Reset = (props) => {
  return (
    <div className="Reset">
      <button 
        id="resetBtn" 
        onClick={props.resetCount}

jinook929

const countReducer = (state = {count: 0}, action) => {
  switch(action.type) {
    case "INCREASE_COUNT":
      return {...state, count: action.payload}
    case "DECREASE_COUNT":
      return {...state, count: action.payload}
    case "RESET_COUNT":
      return {...state, count: action.payload}

    default:

jinook929

// Controllers.js
...
import {connect} from 'react-redux'
import {increaseCount, decreaseCount} from '../actions'

const Controllers = (props) => {
  const handleBtnClick = (e) => {
    props[e.target.name](props.count)
  }
  return (

jinook929

...
import {connect} from 'react-redux'

const Counter = (props) => {
  return (
    <div className="Counter">
      <h1>{props.count}</h1>
      <Controllers />
    </div>
  )