子コンポーネントの更新/更新のみ

Question

サーバーからデータを取得したテーブルを作成しました。私はxx秒ごとにデータを更新するために以下のコードを使用していますが、更新するとページが更新されます。あなたがやっていたことがリセットされるので、これは本当に迷惑になります。

私は、残りのコンポーネントをリフレッシュせずにテーブルを更新する方法を見つけようとしています。

Container> table> rowsはコンポーネント階層です。

setTimeout(() => store.dispatch(fetchData('shops')), i); 

なFetchData（）

 return Object.assign({}, state, { 
      items: action.dataSet, 
      lastUpdated: action.receivedAt 
     }); 

ありがとう！

私は反応と還元を使用しています。

編集： 問題を非常にうまく説明していないように感じて、質問を更新しました。多分今は良い？ itemsは、JSのオブジェクトを比較する（と配列はオブジェクトである）とき、それはポインタの比較を行っているので、（あるように思える）配列の場合

Answer 1

this.props.data.items !== nextProps.data.itemstrueを返します（例：。this.props.data.items === this.props.data.itemsはtrueを返します） 。 JSON.stringify(this.props.data.items) !== JSON.stringify(nextProps.data.items)

そして、我々はそれでいる間、いくつかのさらに読書：

あなたはどちらかが（多分lodash's isEqualのようなものを使用して）かそこらのような文字列にその配列を変換深い比較を行う必要があります！ https://ericlathrop.com/2017/02/why-did-this-react-component-rerender/

Answer 2

還元剤に2つのアレイを保管することも1つの方法です。 1つは「読み込まれた」アイテム用で、もう1つは「着信」アイテム用です。

const initialState = { 
    loaded: [], 
    incoming: [] 
}; 

次に、コンポーネントはloadedアレイにのみ依存する可能性があります。たぶん、後であなたのテーブルには、今、あなたのキューに入れられた項目が表示されるようにloadedアレイ上にあなたのincomingアイテムをダンプする]ボタンをクリックします上

function incoming(state, action) { 
    return { 
    ...state, 
    incoming: state.incoming.concat(action.incoming) 
    }; 
} 

：新しいアイテムがフェッチされたとき、あなたはincoming配列にそれらを追加したいです：あなたがLOAD_INCOMING_ITEMSアクションまたは類似した何かを受信したとき

function loadQueuedItems(state) { 
    return { 
    incoming: [], 
    loaded: state.loaded.concat(state.incoming) 
    } 
} 

その後、減速からその関数を呼び出すことができます。

希望すると便利です。