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} } 
+0

当你得到一个注意到的'3'一个键,你已拥有该键的音符会发生什么?你需要覆盖它还是更改新笔记的密钥? –

+0

只有noteId是唯一的,所以我只是推入阵列键5例如 –

+0

嗯,在我看来,你有混合的数据结构。你看,在你的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)

+0

感谢ü如此多的不过是如何使动态计算的,它似乎并不让我用一个变量。我想用action.payload.noteId为重点,我甚至试过{action.paload.noteId}和$ {} action.payload.noteId其 –

+0

如果固定的数据结构问题,避免像你未来的补丁好得多现在就去做。更多你可以阅读这里从REDX作者https://*.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and -pagina –

+0

@Someone特殊用途计算属性键(我更新了我的答案) –