组件在状态更新时未重新呈现

Question

该组件不会在状态更新时呈现，即使mapStateToProps成功执行。

零件：

import React from 'react';
import AddItem from './addItemComponent';
import { connect } from 'react-redux';
import RenderItem from './RenderItem';

class HomeComponent extends React.Component {

    constructor(props) {
        super(props);

    }
    render() {

        return (
            <div>

                <div className="container">
                    <AddItem />
                </div>

                <div className="container">
                    {this.props.Items.length}
                </div>


            </div>
        );
    }
}

function mapStateToProps(state) {

    return {
        Items: state.auth.items

    }

}
export default connect(mapStateToProps)(HomeComponent);

减速器：

      const ItemsReducers = (state = {}, Action) => {
        if (!state.items)
            state.items = [];

        console.log("inside the reducers", state);
        var newState = Object.assign({}, state);

        switch (Action.type) {
            case 'AddItem':

                newState.items.push(Action.payload);

                return newState;
                break;

            default:
                return newState;
                break;

        }
        return newState;
    }

export default ItemsReducers;

为了避免发生突变，我只克隆对象并执行推入操作。 但是仍然面临问题。 如果我有任何帮助，那会有所帮助。

Answer 1

Object.assign（）创建对象的浅表副本，而不是深层副本。 因此，您有突变！

在您的示例中，由于state已更改，所以mapStateToProps正在执行，但是items保持相同的引用。 因此，即使数组的长度已更改，您的旧items也将与新items相同。 如果输出未更改，则mapStateToProps不会重新渲染组件。

您需要复制状态和项目，如下所示：

var newState = Object.assign({}, state);
newStats.items = newState.items.slice();

但这不是使用redux的好方法。

我建议将不可变性帮助程序包与update（）一起使用。 它创建对象的副本，而无需更改原始源

import update from 'immutability-helper';

const reducer = (state = {}, action) => {

    switch (action.type) {

        case: 'addItem': 
            return !state.items
                ? update(state, {items: {$set: [action.payload]}})
                : update(state, {items: {$push: [action.payload]}})

        default:
            return state;
    }
}