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} }
在我看来,你的数据结构混合。
在您的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)
感谢ü如此多的不过是如何使动态计算的,它似乎并不让我用一个变量。我想用action.payload.noteId为重点,我甚至试过{action.paload.noteId}和$ {} action.payload.noteId其 –
如果固定的数据结构问题,避免像你未来的补丁好得多现在就去做。更多你可以阅读这里从REDX作者https://*.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and -pagina –
@Someone特殊用途计算属性键(我更新了我的答案) –
当你得到一个注意到的'3'一个键,你已拥有该键的音符会发生什么?你需要覆盖它还是更改新笔记的密钥? –
只有noteId是唯一的,所以我只是推入阵列键5例如 –
嗯,在我看来,你有混合的数据结构。你看,在你的json文件中'notes'是一个对象,但在你的reducer中它是一个数组。我希望看到这行'注意:{... state.notes,“someKey”:action.payload}'而不是这个'注意:[... state.notes,action.payload]' –