¿Cómo pasar acción al niño en la reacción usando redux?

Question 1

Tengo contenedor y componente. ¿Cómo pasar la acción (o?) a los componentes secundarios?

Mi contenedor que maneja acciones

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)

Mi componente que representa los datos del contenedor

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

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

Ahí está mi acción

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

javascript reactjs redux

1

Almaz Kaliev 4 nov. 2019 a las 18:30

Answer

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

2

Ozan Bulut 4 nov. 2019 a las 15:39

Question 2

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

2

Ozan Bulut 4 nov. 2019 a las 15:39

¿Cómo pasar acción al niño en la reacción usando redux?

1 respuesta

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

javascript