Запрос внутри редуктора? перевождь

Question

Как мне написать это внутри редуктора, чтобы изменить состояние?

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

скажем, у меня есть редуктор, который выглядит следующим образом Action.payload выглядит примерно так { theInputId1: "someId", theInputId2: "anotherId", theInputValue: "someValue" }

export function updateSubSubSubDoc(state = {}, action){
  switch(action.type){
    case 'UPDATE_THE_SUBSUBSUB':
      return {
               state.doc.subdoc.subsubdoc.find(x => x.id == 
          theInputId1).subsubsubdoc.find(x => x.id == theInputId2).value = theInputValue  // just example code for you to understand where i'm going.
             }

    default:
      return state
  }
}

Что я хочу сделать, это обновить один документ Subsubsub в текущем состоянии

Answer 1

С ES6 это один из способов сделать это:

const initialState = { doc: { subdoc: { subsubdoc: {} } } };
export function doc(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_THE_SUBSUBSUB':
      const subsubdocIdx = state.doc.subdoc.
        subsubdoc.find(s => s.id == action.theInputId1);
      const subsubdoc = state.doc.subdoc.subsubdoc[subsubdocIdx];
      const subsubsubdocIdx = state.doc.subdoc.
        subsubdoc[subsubdocIdx].
        subsubsubdoc.find(s => s.id == action.theInputId2);
      const subsubsubdoc = state.doc.subdoc.
        subsubdoc[subsubdocIdx].
        subsubsubdoc[subsubsubdocIdx];
      return {
        ...state,
        doc: {
          ...state.doc,
          subdoc: {
            ...state.doc.subdoc,
            subsubdoc: [
              ...state.doc.subdoc.subsubdoc.slice(0, subsubdocIdx),
              {
                ...subsubdoc,
                subsubsubdoc: [
                  ...subsubdoc.slice(0, subsubsubdocIdx),
                  {
                    ...subsubsubdoc,
                    value: action.theInputValue,
                  },
                  ...subsubdoc.subsubsubdoc.slice(subsubsubdocIdx + 1, subsubdoc.subsubsubdoc.length - 1),
                ],
              },
              ...state.doc.subdoc.subsubdoc.slice(subsubdocIdx + 1, state.doc.subdoc.subsubdoc.length - 1),
            ]
          }
        }
      }
    default:
      return state;
  }
}

(я не проверял этот код.)

Этот уровень вложен на том же уровне, что и в вашем примере, но вы можете использовать что-то вроде combineReducers, чтобы сделать его немного легче в управлении. Это также предполагает, что у вас есть другие действия, которые создают цепочку документов по пути, и вы знаете, что эти документы существуют.

Вот пример того, как вы можете сделать это с combineReducers:

function doc(state = {}, action) {
}

function subdoc(state = {}, action) {
}

function subsubdoc(state = [], action) {
}

function subsubsubdoc(state = [], action) {
  switch (action.type) {
    case 'UPDATE_THE_SUBSUBSUB':
      const idx = state.find(s => s.id == action.theInputId2);
      return [
        ...state.slice(0, idx),
        {
          ...state[idx],
          value: action.theInputValue,
        },
        ...state.slice(idx + 1),
      ];
    default:
      return state;
  }
}

export default combineReducers({
  doc,
  subdoc,
  subsubdoc,
  subsubsubdoc,
});

В этом примере вам не нужен action.theInputId1, но вам нужно будет сохранить некоторую ссылку в данных из sububdoc в sububsubdoc, чтобы при рендеринге вы могли собрать его вместе. То же самое со всеми другими слоями.