React Redux：reduxに接続した後にコンポーネントが更新されない

Question

質問が冗長に見えるかもしれませんが、mapStateToPropsが呼び出された後にコンポーネントが更新されないようです。以下は私のホームコンポーネント（クラス宣言の外のofc）の中に書いたコードです。

function mapStateToProps(state) { 
    const { tickets } = state; 
    console.tron.log(tickets) 
    if(!tickets.isLoading) { 
    return { 
     loading: false, 
     ticketsModel: tickets.chunkedData 
    } 
    } 
    return { 
    loading: true 
    } 
} 
export default connect(mapStateToProps)(Home); 

すべて正常に動作しますが、小道具への変更はコンポーネントで更新を開始していません。

PS：状態の突然変異が起こったかどうか確認しましたが、それはしませんでした。問題がソートされている：私は

case RECEIVE_TICKETS : 
     return Object.assign({},state,{ 
     isLoading: false, 
     chunkedData: action.data.extractChunkedData(), 
     completeData: action.data.getCompleteData(), 
     }); 

EDITのように新しい状態を再作成しました。私が代わりにあなたがそうのように、より簡潔にごmapStateToPropsを書くことができますcomponentWillReceiveProps

Answer 1

のcomponentWillMount内部の更新のためにチェックしていた愚かな：

function mapStateToProps(state) { 
    const { isLoading, chunkedData } = state.tickets; 
    return { 
    loading: isLoading, 
    ticketsModel: chunkedData 
    }; 
} 
export default connect(mapStateToProps)(Home); 

あなたmapStateToProps機能、およびReduxのロガーを見た後、あなたの問題が最も可能性が高いですコンポーネント自体にコンポーネントにthis.props.loadingをレンダリングする場合は、trueと表示され、次にfalseと表示されます。

また、chunkedData配列に初期状態がないことがわかります。 ticketsオブジェクトの初期状態を設定するときは、空の配列に設定する必要があります。あなたの減速の

だから、最初の数行は次のようになります。あなたは小道具がcomponentWillReceivePropsライフサイクルメソッドに変更見ることができれば

const tickets = (
    state = { 
    isLoading: false, 
    chunkedData: [], 
    // Need more info to know what would go in this object 
    completeData: {} 
    }, 
    action 
) => { 

を参照してください。あなたはconsole.log() nextPropsにできるはずです。これは、小道具が変わるたびに変更されます。

は、ここではライフサイクルメソッドについて詳しく読む：http://busypeoples.github.io/post/react-component-lifecycle/