如何使用 Redux 中的傳入對象更新狀態（對象數組）？

Question

例如，當前狀態是：

    {
     data: [
      {id: 1, number: 100},
      {id: 2, number: 200},
      {id: 3, number: 300}
     ]
    }

行動是：

   const action = (id, number) => {
    return {id: id, number: number}
   }

如何實現滿足以下要求的reducer：

1. 如果狀態（對象數組）沒有與傳入對象具有相同 id 的對象 -將傳入對象推送到狀態；
2. 如果狀態具有與傳入對象具有相同 id 的對象 - 使用傳入對象的number 字段值更新狀態中的此對象。

情況1：

//incoming object
{id: 4, number: 400}

//result
    {
     data: [
      {id: 1, number: 100},
      {id: 2, number: 200},
      {id: 3, number: 300},
      {id: 4, number: 400}
     ]
    }

案例2：

//another incoming object
{id: 2, number: 250}

//result
    {
     data: [
      {id: 1, number: 100},
      {id: 2, number: 250},
      {id: 3, number: 300},
      {id: 4, number: 400}
     ]
    }

也許它有一個簡單的解決方案，但我找不到解決這個問題的正確方法:) 另外我想知道在這種情況下的最佳實踐是什么。

先感謝您

Answer 1

我將您的操作更改為使用payload屬性，但如果您願意，可以將其刪除。 （擁有它更合適）

 const reducer = (state, action) => { switch(action.type) { case 'UPDATE_OR_INSERT': return { data: [ ...state.data.filter(x => x.id !== action.payload.id), action.payload, ] } default: } return state; } console.log( reducer({ data: [ {id: 1, number: 100}, {id: 2, number: 200}, {id: 3, number: 300}, {id: 4, number: 400} ] }, { type: 'UPDATE_OR_INSERT', payload: {id: 2, number: 250}}));

Answer 2

您如何看待這個解決方案？

const testState = {
    data: []
}

export default (state = testState, action) => {
    switch(action.type){
        case "SET_DATA":
            return [
                ...state.data.filter(d => d.id !== action.payload.id),
                action.payload,
            ];
        default:
            return state;
    }
};