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

Question

The component is not rendering on state update, even the mapStateToProps is executing successfully.

Component:

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

Reducers:

      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;

To avoid mutation, I just clone the object and doing push operation. But still facing issue. It would be more helpful if I got any help.

Answer 1

Object.assign() make a shallow copy of your object, not a deep copy. So, you have a mutation !

In your example, mapStateToProps is executing because state has changed, but items keep the same reference. So your old items is equal to the new items , even if the length of array has changed. And mapStateToProps do not rerender the component if the output hasn't changed.

You need to copy your state and items like this:

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

But it's not a good way to use redux.

I recommend to use immutability-helper package with update(). It create a copy of your object without change the original source

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