如何將數據從一個reducer添加到商店中的現有數據？

當用戶在我的ReactJS應用程序中搜索時，他會得到結果。當用戶滾動時，我想使用react-waypoint以無限滾動方式加載下一組數據。什麼工作如下：如何將數據從一個reducer添加到商店中的現有數據？

加載初始設置的項目（並顯示它們）
觸發航點滾動
遞增頁面計數器上滾動
加載與項目從下一頁滾動到nextItems的API

我無法工作的是將其附加到現有的項目。我現在所擁有的是一個將所有額外數據加載到nextItems的獨立Reducer。但我想簡單地將其添加到現有項目中。我在我的items.js減速器中嘗試了以下內容。但是，所有這些都會將未定義的條目添加到nextItems數組中。不知何故，我無法把頭圍繞在這。

export function items(state = [], action) { 
    switch (action.type) { 
     case 'ITEMS_FETCH_DATA_SUCCESS': 
      return action.items; 

     default: 
      return state; 
    } 
} 
export function nextItems(state = [], action) { 
    switch (action.type) { 
     case 'ITEMS_FETCH_NEXT_DATA_SUCCESS': 
      return [...state.items, ...action.nextItems]; 

     default: 
      return state; 
    } 
}

我有，我有這兩個減速機結合起來，並將它們分裂的類型，或在item.js行動文件解決這個問題的感覺。但我不知道如何讓這個工作成功，而我所嘗試的一切都讓我感到困惑，甚至一無所有。

我的行爲：https://pastebin.com/zEPsxhb8

我減速器：https://pastebin.com/dSNFFff0

來源

2017-08-15 Sitethief

你應該能夠Array.prototype.concat以達致這。

export function nextItems(state = [], action) { 
    switch (action.type) { 
     case 'ITEMS_FETCH_NEXT_DATA_SUCCESS': 
      return Object.assign({}, 
       state.items, 
       state.items.concat(action.nextItems) 
      ); 

     default: 
      return state; 
    } 
}

來源

2017-08-15 14:40:13 Purgatory

是啊，我是用CONCAT在我的成分，看看結果會喜歡什麼。問題是nextItems中的狀態是空的。我無法弄清楚這是爲什麼，或者這個狀態是在哪裏設定的。還是謝謝！ – Sitethief

@Sitethief你應該在同一個函數中有兩個動作，當你添加'nextItems'時，狀態不應該是空的。 – Purgatory

你的意思是把它們都放在項目減速器中，然後使用類型去實現它？我真的不明白如何在同一個函數中執行兩個操作？你的例子是減速器iirc？ – Sitethief

您可以使用我的功能。例如，您可以將此功能移至Utils文件或其他服務。

{ ... // this is your reducer 
    return mergeObjectArrays(state, items, options.key || 'id'); 
} 

mergeObjectArrays(arr1, arr2, key = 'id') { 
    const res = arr1.slice(); 

    for (let item of arr2) { 
    let index; 
    if (typeof key === 'string') { 
     index = arr1.findIndex((itm) => itm[key] == item[key]); 
    } 
    else { 
     index = arr1.findIndex((itm) => { 
     let eq = true; 
     for (let i = 0; i < key.length; i++) { 
      eq = eq && itm[key[i]] == item[key[i]] 
     } 
     return eq; 
     }); 
    } 

    if (index === -1) res.push(item); 
    else res[index] = item; 
    } 

    return res; 
}

來源

2017-08-15 15:26:58

謝謝！雖然問題不是如何合併兩個數組，而是如何訪問這兩個數組。 – Sitethief

如何將數據從一個reducer添加到商店中的現有數據？

回答

相關問題