CODEWITHSUNDEEP
reactjsreact-reduxreduce
ellie
ellie

Reputation: 92

Is there any way to send a value to reducer?

hey guys I'm trying to learn redux and in my component I have a value and need to pass it to my reducer.

here is my component:

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

I want to send frame id to my reducer, how can I do it? thank you all

Upvotes: 0

Views: 1100

Answers (2)

wentjun
wentjun

Reputation: 42596

You will need to include the id as part of your payload, as part of your action corresponding to NEWINPUT.

First and foremost, you will need to update your actions and reducer such that it takes in the additional payload, id (frame id).

Then, on your mapDispatchToProps, you will need to make sure that it accepts the id as a parameter. You will have to pass the id to your handleChange props too.

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

Upvotes: 1

Tayyab Razzaq
Tayyab Razzaq

Reputation: 461

You can send payload while dispatching the action.

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

in mapDispathToProps

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

For more detail see this for action payloads and see this for using payloads in reducer.

Upvotes: 2

Related Questions