testComponent.js

import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux';

class testComponent extends React.Component {

    constructor(props) {

        super(props);

        this.state = {
            name: 'shirt',
            quantity: 2,
            rate: 4,
            amount: 0
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ amount: nextProps.amount })
    }

    computeAmount() {
        this.props.dispatch({
            type: 'COMPUTE_AMOUNT',
            paylod: { rate: this.state.rate, quantity: this.state.quantity }
        })
    }

    render() {
        return (
            <div>
                AMOUNT IN REDUX = {this.props.amount}
                <div>
                    <input value={this.state.name} />
                    quantity
                    <input value={this.state.quantity} />
                    rate
                    <input value={this.state.rate} />
                    amount
                    <input value={this.state.amount} />
                </div>
                AMOUNT IN STATE = {this.state.amount}

                <div> <button onClick={(e) => this.computeAmount(e)} >Compute Amount</button> </div>
            </div>
        );
    }
}

testComponent.propTypes = {
    dispatch: PropTypes.func.isRequired
}

const mapStateToProps = (state) => {
    return {
        amount: state.rootReducer.testReducer.amount
    }
}
export default connect(mapStateToProps)(testComponent)