обновить глубоко вложенный массив в Redux

Question

Я искал решение, чтобы найти решение для моей проблемы .. Мне нужно найти правильный субподдок по идентификатору, который я передаю с действием, а затем правильный субсубдок по идентификатору, который я также передаю с действием.

Я выбираю объект из API и затем помещаю его в состояние. Объект, который я имитирую к этому:

proj = {
  id:"zf123ada123ad",
  name:"examp",
  subdoc:{
    name:"subdoc examp",
    subsubdoc:[{
               id:"zcgsdf123zaar21",
               subsubsubdoc:[{
                             id:"af2317bh123",
                             value: "heyhey"   //this value I want to update
                            }]
              }]
}
}

в моем редукторе у меня есть что-то вроде этого атм: Я знаю, что это не работает, потому что я не получаю конкретный объект в массиве, но я не знаю, как это сделать. У меня есть идентификатор sububsubdoc, который я хочу изменить.

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

Мне хотелось бы, чтобы это был рабочий и приемлемый код внутри редуктора:

state.doc.subdoc.subsubdoc.where(x => x.id ==theInputId1)
   .subsubsubdoc.where(
   x => x.id == theInputId2).value = theInputValue

Очень благодарен за каждый ответ !!

Answer 1

Моя первая задача - получить данные в обычном формате. Если у вас нет контроля над API, попробуйте создать формат самостоятельно, как только вы его получите. Это сэкономит вам много сложного кода. Умные структуры данных и тупой программный код обычно работают лучше, чем сложные структуры данных и тонны сложного кода.

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 );

var state = [
	{
  	"id": 1,
    "docs": [
    	{
      	"id": 3,
        "value": "old value"
      }
    ]
  },
  {
  	"id": 2,
    "docs": []
  }
];
console.log( 'old state' );
console.log( JSON.stringify( state ) );
var object_3 = state[0].docs[0];
object_3.value = "new value";
console.log( 'new state' );
console.log( JSON.stringify( state ) );

Answer 2

Предполагая, что action.payload является вашим идентификатором, вы должны сделать что-то вроде

    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, сохранив его в переменной.

Рекомендуется не иметь такого глубокого вложения в хранилище редуксов.