react-redux更新redux存储但不更新组件状态

Question

还原商店中的金额更新，但不是组件状态。我在做什么错误？

组件状态中的金额为0

组件

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)

减速

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;

感谢@Mohamed Binothman

完全正常工作Reducer component

Answer 1

您的数值未连接到Redux状态，这就是问题所在。 要使组件状态与Redux状态同步，您需要执行以下操作：

1-声明在连接上从redux状态获取所需的值。

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

2：将componentWillReceiveProps添加到您的Component

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

Answer 2

将componentWillReceiveProps添加到您的Component

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

并将构造函数返回

constructor(props) {

        super(props);


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