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

【问题标题】：react-redux updates redux store but not component statereact-redux 更新 redux 存储但不更新组件状态
【发布时间】：2017-07-29 07:31:45
【问题描述】：

redux store 中的数量更新但不是组件状态。我在做什么错？

组件状态下数量为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

【问题讨论】：

标签： reactjs redux react-redux immutability immutable.js

【解决方案1】：

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

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

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

2 : 将 componentWillReceiveProps 添加到您的组件中

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

【讨论】：

仍然无法正常工作，我还在减速器中设置了const testReducer = (state = {amount : 0}, action) => {。仍然缺少一些东西
能不能把Component和Reducer的完整代码放上来
awssseome 现在可以工作了，我花了大约 6 个小时才弄清楚 :)。非常感谢
请接受我的编辑..那么这将是一个紧凑的答案
忽略第2步，不需要这个，看我最后的评论

【解决方案2】：

将 componentWillReceiveProps 添加到您的组件中

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

并将构造函数返回为

constructor(props) {

        super(props);


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

【讨论】：

完全正常工作Reducercomponent

完全正常工作Reducer component