在redux中更新深层嵌套数组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在redux中更新深层嵌套数组相关的知识，希望对你有一定的参考价值。
我一直在寻找一个解决方案或指南来解决我的问题..我需要找到一个ID的正确子subddoc我正在通过动作，然后右侧sububsubdoc由一个ID，我也是通过行动。
我从API中获取对象然后进入状态。我对此类似的对象：
proj = {
id:"zf123ada123ad",
name:"examp",
subdoc:{
name:"subdoc examp",
subsubdoc:[{
id:"zcgsdf123zaar21",
subsubsubdoc:[{
id:"af2317bh123",
value: "heyhey" //this value I want to update
}]
}]
}
}
在我的reducer中我有类似于atm的东西：我知道这不起作用，因为我没有得到数组中的特定对象，但这就是我不知道该怎么做。我有sububsubdoc的id，我想改变它的值。
export function answerUpdate(state = [], action){
switch(action.type){
case 'ANSWER_UPDATE_FETCH_SUCCESS':
return {
...state,
proj: {
...state.proj,
subdoc: {
...state.proj.subdoc,
subsubdoc: {
...state.proj.subdoc.subsubdoc,
subsubsubdoc: {
...state.proj.subdoc.subsubdoc.subsubsubdoc,
value: "hoy"
}
}
}
}
default:
return state
}
}
我想要的是这个，但是在reducer中有一个工作且可接受的代码：
state.doc.subdoc.subsubdoc.where(x => x.id ==theInputId1)
.subsubsubdoc.where(
x => x.id == theInputId2).value = theInputValue
非常感谢每一个答案!!
答案
假设action.payload是你的Id，你应该做类似的事情
case 'ANSWER_UPDATE_FETCH_SUCCESS': {
const index = state.proj.subdoc.subsubdoc.findIndex(({id}) => id === action.payload);
const updatedObject = {
...state.proj.subdoc.subsubdoc[index],
value: newValue
}
return {
...state,
proj: {
...state.proj,
subdoc: {
...state.proj.subdoc,
subsubdoc: [
...state.proj.subdoc.subsubdoc.slice(0, index),
updatedObject,
...state.proj.subdoc.subsubdoc.slice(index)
]
}
}
}
}
你可以对id不存在时进行额外的检查，通过将state.proj.subdoc.subsubdoc存储在变量中来减少使用。
建议不要在redux商店中进行如此深的嵌套。
另一答案
我首先关注的是将数据转换为常规格式。如果您无法控制API，请在收到后尝试自行制作格式。这将为您节省大量复杂的代码。智能数据结构和哑程序代码通常比louzy数据结构和大量复杂代码表现更好。
var project = [
{ "id": "zf123ada123ad",
"name": "examp",
"value": null,
"docs": [
{ "id": "zcgsdf123zaar21",
"name": "examp-sub",
"value": null,
"docs": [
{ "id": "af2317bh123",
"name": "examp-sub-sub",
"value": "heyhey",
"docs": []
}
]
}
]
}
];
// 1st option: Recusively search.
var search = function( id ) {
var search_level = function( result, next ) {
if ( result ) return result;
else {
if ( next.id === id ) return next;
else return next.docs.reduce( search_level, null );
}
};
return search_level;
};
var heyhey_search = project.reduce( search( "af2317bh123" ), null );
console.log( 'option 1:' );
console.log( heyhey_search );
// 2nd option: Make a hash table. This is preferred if you need to access records by id often.
var flatten_hash = function( result, next ) {
// Own.
result[ next.id ] = next;
// Nested docs.
return next.docs.reduce( flatten_hash, result );
};
var project_hash = project.reduce( flatten_hash, {} );
var heyhey_hash = project_hash[ "af2317bh123" ];
console.log( 'option 2:' );
console.log( heyhey_hash );以上是关于在redux中更新深层嵌套数组的主要内容，如果未能解决你的问题，请参考以下文章