有没有办法向reducer发送一个值？答案

【问题标题】：Is there any way to send a value to reducer?有没有办法向reducer发送一个值？
【发布时间】：2019-12-23 10:35:08
【问题描述】：

大家好，我正在尝试学习 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);

我想将 frame id 发送到我的 reducer，我该怎么做？谢谢大家

【问题讨论】：

标签： reactjs react-redux reduce

【解决方案1】：

您可以在调度操作时发送有效负载。

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

在 mapDispathToProps 中

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

有关更多详细信息，请参阅this 了解操作负载，并参阅this 了解在减速器中使用负载。

【讨论】：

【解决方案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 })
  }
};

【讨论】：