mapStateToProps aufgerufen, aber Komponenten Requisiten nicht ändern?

Question

Ich habe zwei Container StatedUser und StatedHeader. Das ist Verbindung mit Komponente User und Header Beide erhalten state.user als Requisiten. Nach einigen Aktionen ändern state.user, Komponente Benutzer props.user ändert, aber Header nicht.

Hier ist mein Code container StatedHeader

import Header from '../components/common/Header' 
import {connect} from 'react-redux' 
import {showConfirm} from '../actions' 

const mapStateToProps = state => { 
    console.log(`header user --> ${JSON.stringify(state.user)}`) 
    return { 
    user: state.user, 
    headerFix: state.headerFix  
    } 
} 

const mapDispatchToProps = dispatch => { 
    return { 
    openSignoutDialog:() => { 
     dispatch(showConfirm(true)) 
    } 
    } 
} 

const StatedHeader = connect(
    mapStateToProps, 
    mapDispatchToProps)(Header) 

export default StatedHeader 

------------------------------ bearbeiten --- ----------------------------------

const initialState = { 
    user: {}, 
    displayFlag: false, 
    headerFix: false 
} 

function blogApp (state, action) { 
    if (typeof(state) === 'undefined') { 
    return initialState 
} 

switch(action.type) { 
    case 'SIGN_IN': 
    return Object.assign({}, state, {user: action.user}) 
    // update user what i mentioned in the question 
    case 'UPDATE_AVATAR': 
    return Object.assign({}, state, {user: action.user}) 
    case 'SIGN_OUT': 
    return Object.assign({}, state, {user: {}}) 
    case 'SHOW_CONFIRM': 
    return Object.assign({}, state, {displayFlag: action.displayFlag}) 
    case 'HEADER_FIX': 
    return Object.assign({}, state, {headerFix: action.headerFix}) 
    default: 
    return state 
    } 
} 

export default blogApp 

By the way, Ergebnis console.log festgestellt, dass state.user hat sich wie erwartet geändert, aber die Requisiten der Komponenten haben sich nicht geändert.
Übrigens, meine Reac-Redux-Version ist V5.0.5 irgendwelche Ideen darüber? Vielen Dank!

Answer 1

Nachdem ich den Fehler für eine lange Zeit verfolgt habe, repariere ich es endlich. In User.js, die tiggers die UPDATE_AVATAR.

axios.post(`/user/${this.state.author._id}/avatar`, formData) 
    .then(res=> { 
    this.setState({author: {avatar: res.data.avatar}}) 
    let user = this.props.user //what should cause the bug. 
    user.avatar = res.data.avatar 
    this.props.changeAvatar(user) 
    }) 
    .catch(e => console.log(e.message)) 

was ich hier tun, ist eine HTTP-Anfrage senden Avatar erstellen Benutzers und dann changeAvatar durch Versand zugegriffen auslösen App Zustand zu aktualisieren.

In den Debug-Prozess als folgenden Code zwischen Haltepunkten springen, fand ich, dass Redux das Objekt überprüfen wird, die Sie an es übergeben.

In Javascript, Objekt wird durch Verweis mit = operator.so übergeben ich ersetze, was ich in User.js mit user = Object.assign({}, this.props.user) wies Dann funktioniert es! Obwohl ich keine Ahnung von dem eigentlichen Grund habe, aber es hat sich gebessert!