React componentWillReceivePropsはredux状態の更新時にトリガーしない小道具を受け取ります

Question

私はactionsを保持するストアを持っています。これらのアクションは新しいものが追加されるたびに繰り返されると考えられます。

MessageViewという親にあるMessageListViewというコンポーネントがあります。 socketActions.queue配列に新しいアクションが追加されると、componentWillRecievePropsがトリガーされると考えられますが、そうではありません。だから

function mapStateToProps(state){ 
    console.log(state, "State inside messagelistview.js") 
    return { 
    actionsQueue: state.socketActions.queue, 
    latestAction: state.socketActions.latestAction 
    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ completeAction }, dispatch); 
}; 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(MessageListView); 

私は新しいADD_ACTIONアクションをディスパッチ私の状態の更新&を：

/* Reducer */ 
const initialState = { 
    queue: [{ 
    type: 'alert', 
    action: 'alert', 
    completed: false, // Set to true or just delete this object when the action has been completed 
    data: { 
     message: "the data object dynamically changes based on the type" 
    } 
    }] 
}; 

export default (state = initialState, action) => { 
    switch (action.type) { 
    case ADD_ACTION: 
    let queue = state.queue 
    // action.data['completed'] = false 
    queue.push(action.data) 
    console.log("Just updated queue", action.data) 

    return { 
     ...state, 
     queue: queue, 
     latestAction: new Date() 
    } 

私のコンポーネントは、このような店舗にまで接続されている。ここで

は私の減速は、次のようになります redux-logger は、彼らが同じであることを私に伝えている新しい古い状態を印刷しますか？。 latestActionの値&キュー配列を変更した後、なぜこれを行うのかわかりません。これはなぜコンポーネントwillRecievePropsが動作していないのですが、私は状態が同じ理由を理解できませんか？

Answer 1

これで何か問題が解決するかどうかはっきりしませんが、state.queueを完全に新しい変数キューに正しくコピーしていないと思います。

私のような何かをお勧めしたい：

let queue = state.queue.slice()

...と何が変わるかどうかを確認？今すぐあなたのqueue変数はまだ同じですstate.queue

Answer 2

あなたはレデューサーのキューアイデンティティを変更しません。このコードを試してください：

case ADD_ACTION: 
    let queue = state.queue 
    // action.data['completed'] = false 
    queue.push(action.data) 
    console.log("Just updated queue", action.data) 

    return { 
    ...state, 
    queue: [...queue], // <-- here we copy array to get new identity 
    latestAction: new Date() 
    } 

変更されたオブジェクトを常に浅くコピーする必要があります。

let queue = state.queue 
// action.data['completed'] = false 
queue.push(action.data) 

あなたが直接、既存の状態を変異させた場合、Reduxのは状態の違いを検出しないと、あなたに通知しません：http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments

Answer 3

問題は、あなたがこれを行うと、あなたの状態を変異されているということです参照してください。ストアが変更したコンポーネントES6砂糖と

case ADD_ACTION: 
    return { 
    ...state, 
    queue: state.queue.concat(action.data), 
    latestAction: new Date() 
    } 

か：：

はので、代わりに新しいqueue配列を作成するには、次のオプションをした

case ADD_ACTION: 
    return { 
    ...state, 
    queue: [...state.queue, action.data] 
    latestAction: new Date() 
    } 

Answer 4

連結成分行い浅いチェック（===）状態が更新され、ラップされたコンポーネントがレンダリングされるかどうかは、そのチェックが失敗した場合のみです。あなたの場合は、あなたのキューを突然変異させて、チェックが合格するようにします。あなたはこのようなあなたの減速を変更した場合

それは動作します：

state.queue = state.queue.concat(action.data); 

またはES6の構文で：あなたはImmutable.jsを使用している場合

state = { ...state, queue: [...state.queue, action.data] };