mapStateToPropsが呼び出されましたが、コンポーネントの小道具は変更されませんでしたか？

Question

私は2つの容器StatedUserとStatedHeaderを持っています。コンポーネントUserおよびHeaderと接続しています。両方とも、小道具としてstate.userを受け取ります。一部の操作がstate.userに変更された後、コンポーネントユーザーprops.userは変更されますが、ヘッダーは変更されません。ここで

は私のコードは---編集------------------------------ 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 

です----------------------------------

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 

ところで、console.logの結果が見つかりましたstate.userは期待どおりに変更されましたが、コンポーネントの小道具は変更されませんでした。
ところで、私のreac-reduxバージョンはV5.0.5 ですよね？ありがとう！

Answer 1

バグを追跡した後、ついにそれを修正します。では、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)) 

は、ユーザーのアバターを投稿して、アプリケーションの状態を更新するために派遣してアクセスchangeAvatarをトリガーにHTTPリクエストを送信しています。

ブレークポイント間でジャンプする次のコードのようなデバッグプロセスでは、私はreduxが渡されたオブジェクトをチェックすることがわかりました。

javacriptでは、オブジェクトは参照によって渡されます。= operator.so私はUser.jsを指しているものをuser = Object.assign({}, this.props.user)と置き換えます。実際の理由は分かりませんが、修正されました！