CODEWITHSUNDEEP
reactjsreduxreact-reduximmutabilityimmutable.js
vijay
vijay

Reputation: 10997

react-redux updates redux store but not component state

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

Amount is 0 in component state

enter image description here

enter image description here

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

Upvotes: 1

Views: 424

Answers (2)

Mohamed Binothman
Mohamed Binothman

Reputation: 378

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

Upvotes: 3

Mohamed Binothman
Mohamed Binothman

Reputation: 378

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

Upvotes: 0

Related Questions