Timer on React + Redux. React doesn't pass action to reducer on timer, what's wrong?

Question

JavaScript

I am trying to make a timer in my app (React + Redux)
I have a parent component

import React, { Component } from "react";
import { connect } from "react-redux";
import { compose } from "redux";

import QuestionCounter from "../question-counter";
import FinishButton from "../finish-button";
import TimeCounter from "../time-counter";
import PauseButton from "../pause-button";

import testFinished from "../../actions/test-finished";
import timerTick from "../../actions/timer-tick";
import setTimer from "../../actions/set-timer";

import totalWithEwStruct from "../hoc/total-with-ew-structure";
import withIndicators from "../hoc/with-indicators";

const Total = ({ total, testFinished }) => {
  const { finishedCount, totalCount, isPaussed, timeLeft } = total;
  return (
    <div className="test-total">
      <QuestionCounter
        finishedCount={finishedCount}
        totalCount={totalCount}
        testFinished={testFinished}
      />
      <FinishButton testFinished={testFinished} />
      <TimeCounter
        timeLeft={timeLeft}
        testFinished={testFinished}
        setTimer={setTimer}
        timerTick={timerTick}
      />
      <PauseButton isPaussed={isPaussed} />
    </div>
  );
};

const mapStateToProps = ({ total, loading, error }) => {
  return { total, loading, error };
};

const mapDispatchToProps = {
  testFinished,
  setTimer,
  timerTick
}

export default compose(
  totalWithEwStruct(),
  connect(mapStateToProps, mapDispatchToProps),
  withIndicators()
)(Total);

I am trying to use timeTick in timer(setInterval) in componentDidMount

import React, { Component } from "react";

export default class TimeCounter extends Component {
  componentDidMount() {
    const { setTimer, timerTick } = this.props;
    let timer = setInterval(() => {
      timerTick();
      console.log("tick");
    }, 1000);
    setTimer(timer);
  }

  componentDidUpdate() {
    const { timeLeft, testFinished } = this.props;
    if (timeLeft <= 0) {
      testFinished();
    }
  }

  render() {
    const { timeLeft } = this.props;
    return (
      <div className="question-counter__timeleft">
        Времени осталось
        <span className="question-counter__timer">{timeLeft}</span>
      </div>
    );
  }
}

I end up seeing "tick" - "tick" - "tick" in the console, but React doesn't dispatch my timerTick() to the reducer.
I tried to output action.type from all incoming actions to the console, but my event does not come.

const timerTick = () => {
  return {
    type: "TIMER_TICK"
  };
};

export default timerTick;

Above is the cache code. I don't know why it doesn't work, can someone at least tell me where to dig?

Answer 1

The problem turned out to be that the Total component pulled timerTick directly from the action. I forgot to include timerTick in props destructurization. I was confused by the fact that when I output timerTick from the TimeCounter props to the console, it was not underfined. But I didn't notice that it was just a function.