Question

嘿，我正在尝试学习redux，在我的组件中我有一个价值，需要将其传递给我的reducer。

这是我的组件：

import React from "react";
import Iframe from "react-iframe";
import { Row, Col, Card} from "react-bootstrap";
import {connect} from 'react-redux';

import TextsInput from "./TextsInput";
import ImagesInput from "./ImagesInput";

import Aux from "../../hoc/_Aux";

class Frames extends React.Component {

  render() {
    return (
      <Aux>
          <Col md={7}>
            <Iframe
              url={this.props.url}
              width= {this.props.width}
              height= {this.props.height}
              id= {this.props.id}
            />
            {this.props.inputs.map(( i, index) =>
            <TextsInput
            key={i.index}
            id={i.id}
            name={i.name}
            placeholder={i.placeholder}
            newText={i.newText}
            clicked={this.props.handleChange}
            />)}
          </Col>
      </Aux>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    handleChange: () => dispatch({type: 'NEWINPUT'})
  }
};

export default connect(mapDispatchToProps)(Frames);

我想将帧ID发送到我的减速器，该怎么办？谢谢大家

Answer 1

您可以在分派动作时发送有效载荷。

<TextsInput
   ...
   clicked={e => this.props.handleChange(e, i.id)}
   />

在mapDispathToProps

handleChange: (e, id) => dispatch({type: 'NEWINPUT', payload: {id, event: e}})

有关详细信息，请参见this，有关在reducer中使用有效载荷的信息，请参见this。

Answer 2

您需要将id包括在有效负载中，并将其作为与NEWINPUT对应的动作的一部分。

首先，您将需要更新操作和减速器，使其吸收额外的有效负载id（帧ID）。

然后，在您的mapDispatchToProps上，您需要确保它接受id作为参数。您也必须将id传递给handleChange道具。

class Frames extends React.Component {

  render() {
    return (
      <Aux>
          <Col md={7}>
            <Iframe
              url={this.props.url}
              width= {this.props.width}
              height= {this.props.height}
              id= {this.props.id}
            />
            {this.props.inputs.map(( i, index) =>
            <TextsInput
            key={i.index}
            id={i.id}
            name={i.name}
            placeholder={i.placeholder}
            newText={i.newText}
            clicked={this.props.handleChange(i.id)}
            />)}
          </Col>
      </Aux>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    handleChange: (id) => dispatch({ type: 'NEWINPUT', id })
  }
};

有什么方法可以向减速器发送值？

2 个答案: