react-redux updates redux store but not component state

Question

Amount updates in redux store but not in component state .what wrong i am doing?

Amount is 0 in component state

Component

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,
        }
    }

    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,
    amount: PropTypes.number.isRequired
}

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

Reducer

import update from 'immutability-helper';

let initialState = {amount : 0}

const testReducer = (state = initialState, action) => {

    switch (action.type) {

        case 'COMPUTE_AMOUNT':
            action.paylod.amount = action.paylod.rate * action.paylod.quantity

        //Try 1
        return { ...state, ...action.paylod }

        //Try 2
        // return update(state, { $set: action.paylod });

        //Try 3
        //return update(state, { $merge: action.paylod });

        default:
            return state;
    }
}

export default testReducer;

Thanks @Mohamed Binothman

fully working Reducer component

Stan Sarr · Accepted Answer · 2017-09-22 16:28:59Z

3

Your value of amount not connected to the Redux state, that is the problem. To make your component State sync with the Redux State, you need to do the following :

1- Declare the values that you need to get from redux state on the connect.

const mapStateToProps = (store) => {
      return {
        amount: store.yourReducer.amount
      }
}
testComponent = connect(mapStateToProps)(testComponent)

2 : Add componentWillReceiveProps to your Component

componentWillReceiveProps(nextProps){
      if (this.state.amount !== nextProps.amount) {
          this.setState({amount: nextProps.amount})
      }
}

edited Sep 22, 2017 at 16:28

Stan Sarr

2431 silver badge8 bronze badges

answered Jul 29, 2017 at 7:57

Mohamed Binothman

3782 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vijay Over a year ago

still not working ,also i set const testReducer = (state = {amount : 0}, action) => { in reducer .still something is missing

Mohamed Binothman Over a year ago

can you put the full code of the Component and the Reducer

vijay Over a year ago

awssseome its working now , it took me about 6 hours to figureout :).Thanks a lott

vijay Over a year ago

please accept my edit ..then it will be one compact answer

Mohamed Binothman Over a year ago

ignore the step number 2, no need for this, look to my last comment

Mohamed Binothman · Accepted Answer · 2017-07-29 10:14:34Z

0

Add componentWillReceiveProps to your Component

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

and return the constructor to be

constructor(props) {

        super(props);


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

edited Jul 29, 2017 at 10:14

answered Jul 29, 2017 at 10:09

Mohamed Binothman

3782 silver badges10 bronze badges

Collectives™ on Stack Overflow

react-redux updates redux store but not component state

fully working Reducer component

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

fully working Reducer component

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related