Как и где вызывать функцию в компоненте условно на основе состояния притока

Question

У меня есть компонент, и в моем компоненте у меня есть дочерний компонент.

в моем родительском компоненте у меня есть какая-то функция, и я хочу отключить ее от дочернего компонента.Так что я делаю это с редуксом.

Это мой родительский компонент:

   import React, { Component } from "react";
    import { withRouter } from "react-router-dom";
    import { bindActionCreators } from "redux";
    import { splashStop } from "store/actions/Home/splashStop";

import { connect } from "react-redux";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.goPage = this.goPage.bind(this);
  }

  componentDidMount() {
  }

  goPage = () => {
     this.props.history.push("/agencies");
  };

  render() {
    if (this.props.homeSplash.splashStart == true) {
      myTime.play();
    }
    return (
      <div>
         <ChildComponent />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  homeSplash: state.homeSplash
});

function mapDispatchToProps(dispatch) {
  return {
    splashStop: bindActionCreators(splashStop, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Home));

Это мой дочерний компонент:

здесь, в моем дочернем компоненте функции onClick, я отправляю избыточное действие:

  triggerSplash = () => {
    this.props.splashStart();
  };

мое действие:

export const START_SPLASH = "START_SPLASH";

export const splashStart = () => {
    return dispatch => {
        dispatch({
            type: START_SPLASH,
            payload: true
          });
    };
  };

и мой редуктор:

import { START_SPLASH } from "store/actions/Home/splashStart";

let initialState = {
  splashStart: false
};

export default (state = initialState, action) => {
  switch (action.type) {
    case START_SPLASH:
      return { ...state, splashStart: action.payload };
    default:
      return state;
  }
};

мой редуктор, действие работает правильно,

вот мне интересно, почему myTime.play(); работает всегда, когда компонент монтируется, просто не заботится об этом элементе управления:

if (this.props.homeSplash.splashStart == true) {
          myTime.play();
        }

я помещаю его в неправильное место или как?

Answer 1

Кажется, в твоей структуре редукса все ок. Но вы также должны предоставить свой childComponent, чтобы сделать его более понятным.
Если вы правильно подключили избыточное действие в своем дочернем компоненте, попробуйте следующее:

<button ... onClick={() => this.triggerSplash()}>Click</button>

Поместите стрелку внутри onClick. Потому что при инициализации компонента все функции компонента вызываются автоматически во время рендеринга.