如何在React Redux中正确更新/合并数组值

Question

我的初始状态如下所示，如果添加了新书或更改了价格，则新的更新数组来自服务，我的结果需要在初始状态下合并。

const initialState = {
  booksData: [
    {"Code":"BK01","price":"5"},
    {"code":"BK02","price":"30"},
    {"code":"BK03","price":"332"},
    {"code":"BK04","price":"123"}
  ] 
};

来自服务器的更新的阵列，几乎没有记录更新/新

data: [
  {"Code":"BK01","price":"10"},
  {"code":"BK02","price":"25"},       
  {"code":"BK05","price":"100"}
] 

将更新后的数组与旧数组合并后，更新后的状态应变为。

booksData: [
  {"Code":"BK01","price":"10"},
  {"code":"BK02","price":"25"},
  {"code":"BK03","price":"332"},
  {"code":"BK04","price":"123"},
  {"code":"BK05","price":"100"}
] 

Answer 1

我将过滤掉新数据中的旧数据元素，并进行合并。

const oldBooks = booksData.filter(book => !newData.some(newBook => newBook.code === book.code));
return oldBooks.concat(newData);

请记住，您不得将值推入旧数组。在reducer中，您必须创建新实例，这里是一个新数组。'concat'做到了。

Answer 2

使用“Code”属性合并两个数组和过滤器

const initialState = {
    booksData: [
        { "Code": "BK01", "price": "5" },
        { "code": "BK02", "price": "30" },
        { "code": "BK03", "price": "332" },
        { "code": "BK04", "price": "123" }
    ]
};

const data =
[
    { "Code": "BK01", "price": "10" },
    { "code": "BK02", "price": "25" },
    { "code": "BK05", "price": "100" }
]


let newState = [...initialState.booksData, ...data];
newState = newState.filter((obj, pos, arr) => {
    return arr.map(mapObj => mapObj['Code']).indexOf(obj['Code']) !== pos;
});
console.log(newState);