Как передать действие ребенку в реакции с использованием редукса?

Question

У меня есть контейнер и компонент. Как передать действие (или?) Дочерним компонентам?

Мой контейнер, который обрабатывает действия

class HeaderContainer extends React.Component {
  render() {
    const { index } = this.props;

    return (
        <Header index={index} onChangeIndex={...}/>
    );
  }
}

const putStateToProps = (state) => {
  return {
    index: state.schedule.index
  };
};

export default connect(putStateToProps, null)(HeaderContainer)

Мой компонент, который отображает данные из контейнера

const Header = ({ ...props }) => {
  const { index, onChangeIndex} = props;

  return (
      <AppBar position="static" color="default">
        <Tabs value={index} onChange={onChangeIndex}>
          ...
        </Tabs>
      </AppBar>
  )
};

Естьмое действие

export const changeIndex = (index) => {
  return {
    type: SCHEDULE_CHANGE_INDEX,
    payload: index
  }
};

Answer 1

class HeaderContainer extends React.Component {
  handleChangeIndex = (event) => {
    const index = event.target.value; // You may need to change this line
    this.dispatch(changeIndex(index));
  } 

  render() {
    const { index } = this.props;

    return (
        <Header index={index} onChangeIndex={handleChangeIndex}/>
    );
  }
}