计时器反应 + Redux。 React 不要通过 ComponentDidMount 中的计时器（SetInterval）分派动作

Question

我正在尝试使用 React + Redux 在我的应用程序中创建一个计时器。 所以我有一个组件父级：

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);

我尝试在 componentDidMount 中按计时器使用 timerTick

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>
    );
  }
}

所以我在控制台中看到了“tick”-“tick”-“tick”，但是 React 没有将我的 timerTick() 函数分派给 reducer。 我尝试登录控制台action.type进行调试，timerTick没有动作。

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

export default timerTick;

它的行动准则。

我不明白为什么它不起作用。

Answer 1

您的 Total 组件需要从 props 中获取 timerTick 函数，该函数是与 redux 存储链接的函数，因为您已将其添加到 mapDispatchToProps。

如果你不从 props 中解构它，ccomponent 将使用导入的函数，除非它传递给 dispatch 函数，否则它不是创建的动作

const Total = ({ total, testFinished }) => {
  const { finishedCount, totalCount, isPaussed, timeLeft, timerTick } = 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>
  );
};

Answer 2

您需要在计时器滴答组件中添加计时器滴答的调度。因为子组件不知道这些操作。

更多详情请参考以下链接： https://itnext.io/dispatching-actions-from-child-components-bd292a51f176

Answer 3

响应

如果您的组件未连接到 redux，您将无法调度任何操作。

我是什么意思？

示例

import React from “react”;
import { connect } from “react-redux”;

class MyCom extensa React.Component {

    componentDidMount () {
          const { action } = this.props;

          action();
     }

     render () {
     .....
     }
}

const toState = state => ({....});
const toDispatch = {
   action
};

export default connect(toState, toDispatch)(MyCom);

解释

基本上来自”react-redux” 的connect 是一个HOC，它是javascript 世界上的一个高阶组件：只不过是一个高阶函数。返回另一个函数的函数。