Redux Reducer - 向嵌套狀態添加新數據

我在reducer中將以下json文件保存在客戶端狀態中。現在，當我通過ajax添加新的Notes時，我打電話給NEW_NOTE_SUCCESS reducer，它假設將新音符添加到現有音符數組中。Redux Reducer - 向嵌套狀態添加新數據

export default function clientProfile(state={}, action) { 

    switch(action.type) { 


     case NEW_NOTE_SUCCESS: 
      console.log(action.payload); 
      return { ...state, notes: [...state.notes, action.payload] } 

     default: 
      return state; 
    } 

}

但是，在我做了上述之後，this.props.client.notes將只有我添加的新筆記，但不是舊筆記。

我該如何將新音符「推」到數組中，所以我不需要在每次添加新音符時重新發送音符json文件。

PS：action.payload包含以下json。

{ 
      "noteId": "10000000", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316194", 
      "note": "ADDED A NEW NOTE. NEED TO ADD TO STATE" 
     }

這是原始負載中的json文件。

{ 
    "customerId": "34", 
    "agentId": "1", 
    "createdDate": "1510223892", 
    "firstname": "John", 
    "lastname": "Doe", 
    "mobile": "123456789", 
    "address": "Something email here", 
    "notes": { 
     "0": { 
      "noteId": "1", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316194", 
      "note": "add something" 
     }, 
     "1": { 
      "noteId": "2", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316527", 
      "note": "add something" 
     }, 
     "2": { 
      "noteId": "3", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510317177", 
      "note": "add new thing" 
     }, 
     "3": { 
      "noteId": "4", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510318448", 
      "note": "something" 
     }, 
     "4": { 
      "noteId": "5", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510318476", 
      "note": "this would be note number 5, lets see whether we can get something from this." 
     } 
    } 
}

更新：Reducer Codes - Object而不是數組。

case NEW_NOTE_COMPLETE: 
    return { ...state, notes: {...state.notes, action.payload.noteId: action.payload} }

來源

2017-11-11 Someone Special

當你得到一個注意到的'3'一個鍵，你已擁有該鍵的音符會發生什麼？你需要覆蓋它還是更改新筆記的密鑰？ –

只有noteId是唯一的，所以我只是推入陣列鍵5例如 –

嗯，在我看來，你有混合的數據結構。你看，在你的json文件中'notes'是一個對象，但在你的reducer中它是一個數組。我希望看到這行'注意：{... state.notes，「someKey」：action.payload}'而不是這個'注意：[... state.notes，action.payload]' –

在我看來，你的數據結構混合。
在您的json文件中，note密鑰是object，但在您的reducer中，您將其作爲array處理。
所以這行：

return { ...state, notes: [...state.notes, action.payload] }

應該更像這個（我只是硬編碼的關鍵5你應該讓動態某種方式計算）：

return {...state, notes: {...state.notes, "5": action.payload}}

編輯
作爲跟進你的意見：

但你如何使它動態LY計算，它似乎並不讓我使用變量

可以說你想用noteId爲你的關鍵，那麼你可以使用computed property names of es2015

[action.payload.noteId]: action.payload

我的片段更新說明。

這裏是小運行例如：

const jsonObj = { 
 
    "customerId": "34", 
 
    "agentId": "1", 
 
    "createdDate": "1510223892", 
 
    "firstname": "John", 
 
    "lastname": "Doe", 
 
    "mobile": "123456789", 
 
    "address": "Something email here", 
 
    "notes": { 
 
    "0": { 
 
     "noteId": "1", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510316194", 
 
     "note": "add something" 
 
    }, 
 
    "1": { 
 
     "noteId": "2", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510316527", 
 
     "note": "add something" 
 
    }, 
 
    "2": { 
 
     "noteId": "3", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510317177", 
 
     "note": "add new thing" 
 
    }, 
 
    "3": { 
 
     "noteId": "4", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510318448", 
 
     "note": "something" 
 
    }, 
 
    "4": { 
 
     "noteId": "5", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510318476", 
 
     "note": "this would be note number 5, lets see whether we can get something from this." 
 
    } 
 
    } 
 
} 
 

 
const newNote = { 
 
    "noteId": "10000000", 
 
    "customerId": "34", 
 
    "createdBy": "1", 
 
    "created": "1510316194", 
 
    "note": "ADDED A NEW NOTE. NEED TO ADD TO STATE" 
 
} 
 
const action = { 
 
    type: 'NEW_NOTE_SUCCESS', 
 
    payload: newNote 
 
}; 
 

 
function clientProfile(state = {}, action) { 
 
    switch (action.type) { 
 
    case 'NEW_NOTE_SUCCESS': 
 
     { 
 
     return {...state, notes: {...state.notes, [action.payload.noteId]: action.payload 
 
      } 
 
     } 
 
     } 
 

 
    default: 
 
     return state; 
 
    } 
 
} 
 

 

 
let reducer = clientProfile(jsonObj, {type: ''}); 
 
console.log("before the change",reducer.notes) 
 
reducer = clientProfile(jsonObj, action); 
 
console.log("after the change",reducer.notes)

來源

2017-11-11 09:23:07

感謝ü如此多的不過是如何使動態計算的，它似乎並不讓我用一個變量。我想用action.payload.noteId爲重點，我甚至試過{action.paload.noteId}和$ {} action.payload.noteId其 –

如果固定的數據結構問題，避免像你未來的補丁好得多現在就去做。更多你可以閱讀這裏從REDX作者https://stackoverflow.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and -pagina –

@Someone特殊用途計算屬性鍵（我更新了我的答案） –

Redux Reducer - 向嵌套狀態添加新數據

回答

相關問題